(十二).CSS3中的边框圆角，外边框，文本样式，背景，渐变样式

本文主要是介绍(十二).CSS3中的边框圆角，外边框，文本样式，背景，渐变样式，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

1 CSS3 新增边框属性

1.1 边框圆角

单个圆角属性值的设置规则：

border-top-left-radius: 10px;
/* 使用百分比时，参照的元素本身的宽高 */
border-top-left-radius: 10%;
/* 两个值得时候，第一个是x轴的半径长，第二个是y轴的半径长 */
border-top-right-radius: 50px 10px;
/* 百分比的时候也一样 */
border-bottom-right-radius: 50% 10%;

复合属性的使用：

/* 1个值同时设置4个角 */
	border-radius: 10px;
	border-radius: 50%;

/* 2个值同时设置4个角
	左上右下  右上左下
*/
	border-radius: 10px 20px;

/* 3个值同时设置4个角 
	左上  右上左下 右下
*/
	border-radius: 10% 30% 50%;

/* 4个值同时设置4个角 
	左上 右上 右下 左上
*/
	border-radius: 10% 20% 30% 40%;

/* 分别表示 x轴  和 y轴 */
/*        x轴  y轴
	左上角  50px 10px
	右上角  10px 20px
	右下角  50px 30px
	左下角  10px 20px 
	'/'之前表示的是x轴的半径长度，之后表示的是y轴的半径长度
*/
border-radius: 50px 10px/10px 20px 30px;

1.2 外轮廓

外轮廓与边框的区别：

1. 外轮廓不是盒子的一部分，不影响盒子大小，不占位置
2. 外轮廓位置如果与边框重合，外轮廓显示在上面

2 CSS3 新增文本属性

单行长文本显示省略号：

/* 强制显示在一行 */
white-space: nowrap;
/* 溢出隐藏 */
overflow: hidden;
/* 显示省略号 */
text-overflow: ellipsis;

text-shadow 文本阴影的设置规则：

/* 两个长度阴影偏移位置 */
text-shadow: 2px 2px;
text-shadow: 5px 5px #ccc;
text-shadow: #ccc -5px -5px ;

/* 设置模糊值 */
text-shadow: 5px 5px 5px #ccc;

/* 多层阴影 */
text-shadow:1px 1px #bbb, 
            2px 2px #aaa, 
            3px 3px #999, 
            4px 4px #888, 
            5px 5px #777; 

3 CSS3 新增背景属性

3.1 新增属性

① background-origin

该属性可以设置背景图像定位的原点，有如下值：

padding-box		原点在内边距上，默认值
content-box		原点在内容上
border—box		原点在边框上

② background-clip

该属性可以设置背景图像的显示区域，有如下值：

border-box		边框以及以内有背景图，默认值
padding-box		内边距和内容上有背景图
content-box		只有内容上有背景图
text				只有文字上有背景图，需要加 -webkit- 私有前缀

③ background-size

该属性可以设置背景图片尺寸，值的设置规则如下：

1. 设置两个长度，分别表示图片的宽度、高度
2. 使用百分比作为长度，宽度参照元素宽度，高度参照元素高度
3. 如果只设置了一个长度，该长度表示图片的宽度，图片的高度根据比例自动计算
4. contain 自动调整图片大小适应元素，优先保证图片显示完整
5. cover 自动调整图片大小适应元素，保证元素上每一部分都有背景图，常用

3.2 background 复合属性

新增了 3 个子属性，复合属性规则如下：

1. 如果值中存在 content-box、padding-box、border-box
   如果只有一个值，表示同时设置 background-origin 和 background-clip
   如果有两个值，第一个是 background-origin，第二个是 background-clicp
2. background-position 和 background-size 的值必须写在一起，使用 / 分隔
   前面是 background-position， 后面是 background-size

 background: #ccc url(../images/31.jpg) no-repeat 0 0/cover content-box padding-box ;

3.3 多背景图

background: url(../images/bg-tl.png) no-repeat left top,
            url(../images/bg-tr.png) no-repeat right top,
            url(../images/bg-bl.png) no-repeat left bottom,
            url(../images/bg-br.png) no-repeat right bottom,
            url(../images/bg05.jpg) no-repeat center/cover;

如果背景图位置有重合，先写的背景图显示在上面！

实现高度的视窗的方法

​ 第一种设置 html和body高度为100%，在设置元素高度100%即可实现

​ 第二种直接设置 元素高度为 100vh即可

4 CSS3 渐变

CSS 中，渐变被作为图片使用，需要相关的CSS属性进行配合，如 background-image。

4.1 线性渐变

linear-gradient(渐变方向， 颜色列表)

1. 渐变方向
   ① 使用关键字设置
     to left、to top、to left top、to right bottom ...
   ② 角度
     0deg ~ 360deg
     
2. 颜色列表
   每个颜色可以指定位置，位置使用长度表示
   如果颜色不指定位置，各个颜色的位置平均分布

    background-image: linear-gradient(to right, #f00, #00f);

    background-image: linear-gradient(to right bottom, #000, #0ff);

    /* deg 的度数可以理解为钟的指向 */
    background-image: linear-gradient(180deg, #ccc, #ff0);

    /* 指定颜色开始结束长度 (只有不同颜色之间的部分才会渐变)*/
    background-image: linear-gradient(90deg, #f00 0px, #f00 300px, #00f 300px, #00f 600px);
    background-image: linear-gradient(90deg, #f00 0, #f00 50%, #00f 50%, #00f 100%);

    /* 
        指定多种颜色 ，默认是多种颜色等比例平分
    */
    background-image: linear-gradient(180deg, #000, #ff0, #0ff);

    /* 
        指定多种颜色 ，且指定比例渐变
    */
    background-image: linear-gradient(90deg, #f00 0, #f0f 25%, #00f 50%, #cfc 75%, #0cf 100%);

4.2 径向渐变（了解）

radial-gradient(半径 at 圆心，颜色列表)

4.3 重复渐变

repeating-linear-gradient()
repeating-radial-gradient();

这篇关于(十二).CSS3中的边框圆角，外边框，文本样式，背景，渐变样式的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！