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;
CSS 属性名 | 含义 | 值 |
---|---|---|
outline-style | 样式 | 同 border-style的值 |
outline-width | 宽度 | 长度 |
outline-color | 颜色 | 颜色 |
outline | 复合属性 | eg: 1px solid #fff |
outline-offset | 外廓线的偏移量,外轮廓与边框的距离, 并不是 outline 的子属性 |
长度(负值表示往内偏移) |
外轮廓与边框的区别:
1. 外轮廓不是盒子的一部分,不影响盒子大小,不占位置 2. 外轮廓位置如果与边框重合,外轮廓显示在上面
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;
该属性可以设置背景图像定位的原点,有如下值:
padding-box 原点在内边距上,默认值 content-box 原点在内容上 border—box 原点在边框上
该属性可以设置背景图像的显示区域,有如下值:
border-box 边框以及以内有背景图,默认值 padding-box 内边距和内容上有背景图 content-box 只有内容上有背景图 text 只有文字上有背景图,需要加 -webkit- 私有前缀
该属性可以设置背景图片尺寸,值的设置规则如下:
1. 设置两个长度,分别表示图片的宽度、高度 2. 使用百分比作为长度,宽度参照元素宽度,高度参照元素高度 3. 如果只设置了一个长度,该长度表示图片的宽度,图片的高度根据比例自动计算 4. contain 自动调整图片大小适应元素,优先保证图片显示完整 5. cover 自动调整图片大小适应元素,保证元素上每一部分都有背景图,常用
新增了 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 ;
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即可
CSS 中,渐变被作为图片使用,需要相关的CSS属性进行配合,如 background-image
。
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%);
radial-gradient(半径 at 圆心,颜色列表)
repeating-linear-gradient() repeating-radial-gradient();