新增边框属性
边框圆角
在CSS中，使用border-radius属性可以将盒子变为圆角。
同时设置四个角的圆角。
border-radius: 10px;
//正圆或椭圆
border-radius: 50%;
分开设置每个角的圆角（用的少） ：
| 属性名 | 作用 |
|---|---|
border-top-left-radius |
设置左上角的圆角半径： 1、一个值是正圆半径。 两个值分别是椭圆的x半径和y半径。 |
border-top-right-radius |
设置右上角的圆角半径： 1、一个值是正圆半径。 两个值分别是椭圆的x半径和y半径。 |
border-bottom-left-radius |
设置左下角的圆角半径： 1、一个值是正圆半径。 两个值分别是椭圆的x半径和y半径。 |
border-bottom-right-radius |
设置右下角的圆角半径： 1、一个值是正圆半径。 两个值分别是椭圆的x半径和y半径。 |
复合属性写法：
border-radius: 左上 右上 右下 左下
border-radius: 左上x 右上x 右下x 左下x / 左上y 右上y 右下y 左下y
边框外轮廓（了解）
| 属性名 | 作用 |
|---|---|
outline |
复合属性 用法与 border一致，不区分顺序，但是outline-offset不能放进复合属性内 |
outline-width |
外轮廓的宽度 |
outline-color |
外轮廓的颜色 |
outline-style |
外轮廓的风格none：无轮廓dotted：点状轮廓dashed：虚线轮廓solid：实线轮廓double：双线轮廓 |
outline-offset |
设置外轮廓与边框的距离，正负值都可以设置 |
outline: 10px orange solid;
outline-offset: 10px;
新增文本属性
文本阴影
在CSS3中，使用text-shadow属性给文本添加阴影
语法：
text-shadow: h-shadow v-shadow blur color;
各个值含义:
| 值 | 含义 |
|---|---|
h-shadow |
水平阴影的位置，必须填写，可以为负值 |
v-shadow |
垂直阴影的位置，必须填写，可以为负值 |
blur |
可选，模糊距离 |
color |
可选，阴影的颜色 |
默认值：text-shadow:none;表明没有阴影
文本换行
在CSS3中，使用white-space属性设置文本换行方式。
常用值如下：
| 值 | 含义 |
|---|---|
normal |
文本超过边界自动换行，文本中的换行浏览器识别为一个空格（默认值） |
pre |
原样输出，与pre标签的效果一样 |
pre-wrap |
在pre效果的基础上，超出元素边界自动换行 |
pre-line |
在pre效果的基础上，超出元素边界自动换行，且只识别文本中的换行，空格会忽略 |
nowrap |
强制不换行 |
文本溢出
在CSS3中，使用text-overflow属性设置文本内容溢出时的呈现模式。
常用值如下：
| 值 | 含义 |
|---|---|
clip |
当内联内容溢出时，将溢出部分裁切掉。（默认值） |
ellipsis |
当内联内容溢出块容器时，将溢出部分替换为...
|
注意：要使得
text-overflow属性生效，块容器必须显式定义overflow为非visible值，white-space为nowrap值。
文本修饰
CSS3升级了text-decoration属性，让其变成了一个复合属性。
/*line style color*/
text-decoration: overline dashed blue;
| 值 | 含义 |
|---|---|
text-decoration-line |
设置文本装饰线的位置none：无装饰（默认值）underline：下划线overline：上划线line-through：删除线 |
text-decoration-style |
设置文本装饰线条的形状solid：实线（默认值）double：双线dotted：点状线dashed：虚线wavy：波浪线 |
text-decoration-color |
文本线条的颜色 |
文本描边（了解）
注意：文字描边功能仅webkit内核浏览器支持。
-webkit-text-stroke-width: 3px;
-webkit-text-stroke-color: red;
-webkit-text-stroke: 3px red;
新增渐变
线性渐变
background-image: linear-gradient(direction, color-step1, color-step2, ...);
direction：控制渐变方向，支持关键词（如to right）或角度值（如45deg）。
color-step：定义颜色及其位置（如red 20%），至少需两个色标。
角度值：0deg对应to top，90deg对应to right，顺时针递增
另外
1、多色渐变：可添加多个色标实现复杂过渡，如：
background: linear-gradient(to right, red, green 30%, blue);
2、透明度控制：使用rgba()或transparent创建透明渐变。
3、硬停点：通过重叠色标位置（如red 50%,blue 50%）实现颜色突变
径向渐变
默认方式
background-image: radial-gradient(yellow,red,green);
径向圆心的位置
background-image: radial-gradient(at top,yellow,red,green);
通过像素点定位圆心位置
background-image: radial-gradient(at 100px 50px,yellow,red,green);
调整圆心为正圆
background-image: radial-gradient(circle,yellow,red,green);
调整圆心的半径
background-image: radial-gradient(100px 100px,yellow,red,green);
调整渐变的区域
background-image: radial-gradient(yellow 50px,red 100px,green 50px);
重复渐变
在没有发生渐变的区域（纯色区域），重新开始渐变
在线性渐变和径向渐变基础上加上repeating-,即为重复渐变
© 版权声明
文章版权归作者所有，未经允许请勿转载。
相关文章
暂无评论...
