一、边框
1. border-radius：圆角
创建圆角边框
div { width: 100px; padding: 10px 40px; border-radius: 15px; border: 2px solid black; } <div>HELLO CSS3</div>
2. box-shadow：盒阴影
给盒子添加阴影
div { width: 300px; height: 100px; background-color: lightblue; box-shadow: 10px 10px 5px #ccc; } <div></div>
3. border-image：边界图片
指定一个图片作为边框
#round { border-image: url(border.png) 30 30 round; } #stretch { border-image: url(border.png) 30 30 stretch; }
二、渐变
1. 渐变（gradients）
可以让你在两个或多个指定的颜色之间显示平稳的过渡。
2. 线性渐变
至少定义两种颜色节点。
background-image: linear-gradient(direction, color-stop1, color-stop2, ...);
线性渐变：从上到下（默认情况）
#grad { height: 100px; background-image: linear-gradient(#e66465, #9198e5); }
线性渐变：从左到右
#grad { height: 100px; background-image: linear-gradient(to right, #e66465, #9198e5); }
线性渐变：对角
#grad { height: 100px; background-image: linear-gradient(to bottom right, #e66465, #9198e5); }
线性渐变：使用角度
#grad { height: 100px; background-image: linear-gradient(-90deg, #e66465, #9198e5); }
线性渐变：使用透明度。使用 rgba() 函数。
#grad { height: 100px; background-image: linear-gradient(to right, rgba(255, 0, 0, 0), rgba(255, 0, 0, 1)); }
重复线性渐变：重复线性渐变，使用 repeating-linear-gradient() 函数。
#grad { height: 100px; background-image: repeating-linear-gradient(red, yellow 10%, lightgreen 20% ); }
3. 径向渐变
径向渐变由它的中心定义。创建一个径向渐变，也必须至少定义两种颜色节点。
background-image: radial-gradient(shape size at position, start-color, ..., last-color);
径向渐变：颜色均匀分布
#grad { width: 150px; height: 150px; background-image: radial-gradient(red, yellow, lightgreen); }
径向渐变：颜色节点不均匀分布
#grad { width: 150px; height: 150px; background-image: radial-gradient(red 5%, yellow 20%, lightgreen 60%); }
径向渐变：shape 设置形状
- circle：圆形
- ellipse：椭圆形（默认）
#grad { width: 200px; height: 150px; background-image: radial-gradient(red, yellow, lightgreen); }
#grad { width: 200px; height: 150px; background-image: radial-gradient(circle, red, yellow, lightgreen); }
径向渐变：重复的径向渐变
#grad { width: 200px; height: 150px; background-image: repeating-radial-gradient(circle, red 2%, yellow 10%, lightgreen 20%); }
三、文本效果
1. text-shadow：文本阴影
指定水平阴影，垂直阴影，模糊的距离，以及阴影的颜色
h3 { text-shadow: 8px 5px 5px #FF0000 } <h3>Text-shadow 阴影效果!</h3>
2. box-shadow：盒子阴影
指定水平阴影，垂直阴影，模糊的距离，以及阴影的颜色
div { width: 200px; height: 80px; background-color: yellow; box-shadow: 8px 5px 5px #888; } <div></div>
3. 实例：卡片效果
div.card{ width: 250px; height: 300px; text-align: center; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); } div.header{ color: white; padding: 10px; font-size: 40px; background-color: #4CAF50; } div.container{ padding: 10px; } <div class="card"> <div class="header"> <h1>1</h1> </div> <div class="container"> <p>2022-5-20</p> </div> </div>
4. Text Overflow 属性
文本溢出属性指定应向用户如何显示溢出内容
- ellipsis：溢出的内容以 ...省略
- clip：溢出的内容直接隐藏
div { white-space: nowrap; /*规定段落中的文本不进行换行*/ width: 12em; overflow: hidden; border: 1px solid #000; } #demo1 { text-overflow: ellipsis; } #demo2 { text-overflow: clip; } <div id="demo1">This is some long text that will not fit in the box</div><br> <div id="demo2">This is some long text that will not fit in the box</div>
5. word-wrap: 换行
如果某个单词太长，不适合在一个区域内，它扩展到外面。
语法：word-wrap:break-word;
p { width: 10em; word-wrap: break-word; border: 1px solid black; } <p>This paragraph contains a very long word</p>
不积跬步无以至千里 不积小流无以成江海
