CSS教程

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

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

1 CSS3 新增边框属性

1.1 边框圆角

CSS 属性名 含义
border-top-left-radius 左上角 长度
border-top-right-radius 右上角 长度
border-bottom-left-radius 左下角 长度
border-bottom-right-radius 右下角 长度
border-radius 长度

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

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 外轮廓

CSS 属性名 含义
outline-style 样式 同 border-style的值
outline-width 宽度 长度
outline-color 颜色 颜色
outline 复合属性 eg: 1px solid #fff
outline-offset 外廓线的偏移量,外轮廓与边框的距离,
并不是 outline 的子属性
长度(负值表示往内偏移)

外轮廓与边框的区别:

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

2 CSS3 新增文本属性

CSS 属性名 含义
text-align-last 最后一行文本水平对齐方式 start:起始方向对齐,默认值。
end:结束方向对齐。
justify:两端对齐。
left:左对齐。
right:右对齐。
center:居中对齐。
text-decoration-line 文本修饰线类型 none:无修饰线。
underline:下划线。
line-throuth:删除线。
overline:上划线
text-decoration-style 文本修饰线样式 solid:实线。
dotted:点线。
dashed:虚线。
double:双实线。
wavy:波浪线
text-decoration-color 文本修饰线颜色 颜色
text-decoration 复合属性 值没有顺序和数量要求
white-space 设置文本显示格式 normal: 默认值。
pre:文本原格式显示。
pre-wrap:在pre基础上增加自动换行。
pre-line:在normal基础上识别文本内自带的换行。
nowrap:强制一行显示。
text-overflow 设置文本溢出方式,必须和overflow一起使用才会生效 clip:默认值。
ellipsis:省略号。
text-shadow 文本阴影

单行长文本显示省略号:

/* 强制显示在一行 */
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中的边框圆角,外边框,文本样式,背景,渐变样式的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!