css3属性之边框圆角、背景与渐变_border-top-right-radius属性圆角背景色-CSDN博客

本文链接：https://blog.csdn.net/CcA_Lin/article/details/104857575

本文详细介绍了CSS3中的边框圆角、背景和渐变属性，包括border-radius、border-image、box-shadow、background及其相关属性的使用方法，以及线性渐变和径向渐变的实现技巧，适合前端开发者学习参考。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

css3之圆角、背景及渐变

border-radius

兼容性：IE9+、Firefox 4+、Chrome、Safari 5+ 以及 Opera

border-radius 属性允许我们为元素添加圆角边框，是一个最多可指定四个 border -*- radius 属性的复合属性。拆开来就是 border-top-left-radius、border-top-right-radius、border-bottom-right-radius、border-bottom-left-radius

1、方向及各数量的值

每个半径的四个值的顺序是：左上角，右上角，右下角，左下角。

设置一个值时，很好理解，四个角都是这个值
设置两个值时，采用对角线相等的原则（参考margin、padding）。例如， border-radius: 50px 0px; 则左上和右下为50px，右上和左下为0。
设置三个值时，根据对角线原则，第四个值会与第二个值相等。例如， border-radius: 5px 10px 15px; 则左上、右上、右下、左下分别为5px、10px、15px、10px

2、数值表示

数值有三种表示方法：px、%、em：

px：例如 50px，即为半径为50px的圆放在这个元素边框所呈现的弧度。假设现在这个元素高、宽为100px，那就成了圆。
%：将这个百分数乘以高、宽得到两条半径，以这两条半径在该元素内画椭圆，就能得到这个弧度。

注意：画圆时设置px的话，应该根据元素的实际宽高，而不只是width\height。

3、完整结构

w3c：border-radius: 1-4 length|% / 1-4 length|%;

比如我们上面写的border-radius : 50px，根据定义完整的写法应该是：border-radius : 50px 50px 50px 50px / 50px 50px 50px 50px;

“/”前的四个数值表示圆角的水平半径，后面四个值表示圆角的垂直半径。根据水平半径和垂直半径的值，可以形成一个椭圆或者圆形，然后再根据这个去给元素设置圆角的弧度。

水平、垂直半径
　[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-eDUBTf6V-1584157569689)()]

水平半径和垂直半径都是可写1-4个值，各个数量的含义与上述相同。

border-image

语法：border-image：sourc slice width outset repeat

兼容性：FireFox、Chrome、safari6+ ，IE和Opera不兼容

border-image-source:none|url("…") // 用在边框的图片的路径。
border-image-slice:number | % | fill //图片边框向内偏移。
border-image-width:number | % | auto //图片边框的宽度。
border-image-outset:length | number //边框图像区域超出边框的量，number代表边框的倍数
border-image-repeat:stretched(拉伸)| rounded(铺满) | repeated | initial | inherit

box-shadow

box-shadow: h-shadow v-shadow blur spread color inset;

兼容性：IE9+、FireFox4+、Chrome、safari5+、Opera

h-shadow 必需。水平阴影的距离，允许负值。正值往右。
v-shadow 必需。垂直阴影的距离，允许负值。正值往下。
blur 可选。模糊距离。
spread 可选。扩展阴影的尺寸。利用它可向外部扩张，创建边框。
color 可选。阴影的颜色。请参阅 CSS 颜色值。
inset 可选。将外部阴影 (outset) 改为内部阴影。内部阴影时，阴影会在右上侧，内容会出现在阴影处，模糊会出现在阴影和内容块的边界处，注意，是透明到不透明的渐变而不是颜色的渐变。给此属性赋予多层值（用逗号分隔）可以创建多层“边框”。写在后面的里层。

background

1、background-clip 指定背景绘制区域

background-clip: border-box | padding-box | content-box

兼容性：IE9+、FireFox、Chrome、safari、Opera

2、background-origin 指定背景图片的原始起始位置

background-origin: border-box | padding-box | content-box

区别：background-position ，该属性通过水平和垂直偏移量定义背景图片的位置，我们都知道它是相对于左上角，那么这个左上角究竟是哪一个点，就是由background-clip指定。

兼容性：IE9+、FireFox4+、Chrome、safari5+、Opera

3、background-size 指定背景图片的大小

backgrond-size: length | % | cover | contain

兼容性：IE9+、FireFox4+、Chrome、safari5+、Opera

div{
    height:800px;
    width:400px;
}

background-size: 400px 400px;
background-size: 50% 50%;  //背景图片宽400px高200px

//当只指定一个值时，第二个值默认为auto，根据图片的宽度等比缩放
background-size: 400px;
background-size: 50%;

background-size: cover; //背景图片等比缩放填满整个容器

background-size: contain; //将背景图片等比缩放至其中一边紧贴容器边缘

4、多重背景图像

background-image: url(“img1.jpg”),url(“img2.jpg”),…,url(“imgn.jpg”);

注意：前面的图像会覆盖后面的图像

5、背景属性整合

background: color position size repeat origin clip attachment image;

但这个有点长，不好记，而且有时候我们并不需要用到所有属性。如果其中一个属性写错时也比较难排查，因此还是建议将css、css3的属性分开写，即：

background: color image repeat position;
background-size:...;
background-origin:...;

渐变

指在两个或多个颜色之间进行平滑的

1、线性渐变Linear Gradients

background:linear-gradient(direction,color-stop1,color-stop2,…)

background:linear-gradient(angle,color-stop1,color-stop2,…)

关于directtion

省略时为从上到下（默认）
从左到右:

background:-webkit-linear-gradient(left,color-stop1,color-stop2,...)   //写开始方向begin-direction
background:-moz-linear-gradient(right,color-stop1,color-stop2,...)   //FireFox3.6-15写结束方向，end-direction  
background:-o-linear-gradient(right,color-stop1,color-stop2,...)    //写结束方向，end-direction
background:linear-gradient(to right,color-stop1,color-stop2,...)  //标准写法 to-end-direction

现在火狐新版本写开始方向，同时也兼容标准写法。

对角线方向，假设左上到右下

background:-webkit-linear-gradient(left top,color-stop1,color-stop2,...)    //写开始方向
background:-moz-linear-gradient(right bottom,color-stop1,color-stop2,...)   //写结束方向
background:-o-linear-gradient(right bottom,color-stop1,color-stop2,...)     //写结束方向
background:linear-gradient(to right bottom,color-stop1,color-stop2,...)     //标准写法