文章目录
一、边框
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>
不积跬步无以至千里 不积小流无以成江海