目录
圆角
border-radius用来设置元素的（四个方向）外边框“1/4”的圆角效果
| 圆角类型 | 描述 | 举例 |
|---|---|---|
| 圆角边框 | 当使用一个半径时确定一个圆 | border-radius:50px; |
| 椭圆边框 | 当使用两个半径时确定一个椭圆 第一个值是椭圆水平半径 第二个值是椭圆垂直半径 | border-radius:50px/30px; |
圆角边框
border-radius: 50px;
<style>
.box {
width: 100px;
height: 100px;
border: 2px solid skyblue;
}
.circle {
width: 100px;
height: 100px;
background-color: khaki;
/* 上右下左 4个方向边框的圆角半径大小 50px */
border-radius: 50px;
/* 上右下左 4个方向边框的圆角半径大小 30px */
/* border-radius:30px; */
}
</style>
<body>
<div class="box">
<div class="circle"></div>
</div>
</body>| border-radius:50px时 | border-radius:30px时 |
|---|---|
 |  |
椭圆边框
<style>
.box {
width: 200px;
height: 200px;
border: 2px solid skyblue;
position: relative;
}
.oval {
width: 200px;
height: 200px;
background-color: khaki;
/* 四个方向的椭圆水平半径/垂直半径 */
border-radius: 80px/100px;
/* border-radius: 40px/80px; */
}
</style>
<body>
<div class="box">
<div class="oval"></div>
</div>
</body>| border-radius:80px/100px时 | border-radius:40px/80px |
|---|---|
 |  |
border-radius的值百分比表示法
- 百分比%是相对于当前元素的可视宽和可视高而言
- 水平半径相当于元素的“可视宽”而言 水平半径 = (width + padding + border) * 百分比
- 垂直半径相当于元素的“可视高”而言 垂直半径 = (height + padding + border) * 百分比
<style>
.box {
width: 400px;
height: 200px;
background-color: pink;
/*
计算得到
椭圆水平半径=400 *20%=80px
椭圆垂直半径=200 *20%=40px
*/
border-radius: 20%;
}
</style>
<body>
<div class="box"></div>
</body>效果：
单独设置四个方向圆角-小属性
| 属性 | 描述 | 举例 |
|---|---|---|
| border-top-left-radius | 左上角 | border-top-left-radius:20px; |
| border-top-right-radius | 右上角 | border-top-right-radius:20px 30px; |
| border-botttom-left-radius | 左下角 | border-bottom-left-radius:10%; |
| border-bottom-right-radius | 右下角 | border-bottom-right-radius:10% 20%; |
<style>
.box {
/* 宽 */
width: 100px;
height: 100px;
background-color: tomato;
/* 4个方向圆角半径为50px */
border-radius: 50px;
/* 左上角圆角半径20px */
border-top-left-radius: 20px;
}
</style>
<body>
<div class="box"></div>
</body>效果：
box-shadow盒子阴影
box-shadow 给盒子添加阴影效果，阴影是不占空间的
box-shadow: [inset] x偏移 Y偏移 模糊半径 [扩散半径] 颜色;
- []方括号：表示这个值可以省略不写
- inset：表示内阴影，当需要设置内阴影时，才添加
- x偏移：阴影在x轴（水平）方向偏移量 值为正，表示阴影向右偏移 值为负 表示阴影向左偏移
- y偏移：阴影在Y轴（垂直）方向偏移量 值为正 表示阴影向下偏移 值为负 表示阴影向上便宜
- 模半径：值只能是 >= 0的值，表示阴影的模糊半径
- 扩散半径：取正值时，阴影扩大；取负值时，阴影收缩。默认为0，此时阴影与元素同样扩大
- 颜色：表示阴影的颜色
简单阴影
<style>
.box {
width: 100px;
height: 100px;
background-color: aquamarine;
margin: 50px auto;
/*
60px x(水平)向右偏移量
20px y(垂直)向下偏移量
10px 阴影模糊量
red 阴影颜色为红色
*/
box-shadow: 60px 20px 10px red;
}
</style>
<body>
<div class="box"></div>
</body>效果：
阴影延展
<style>
.box {
width: 100px;
height: 100px;
background-color: aquamarine;
margin: 50px auto;
/*
60px x(水平)向右偏移量
20px y(垂直)向下偏移量
10px 阴影模糊量
50px 阴影的延展大小（上下左右都延展50px)
red 阴影颜色
*/
box-shadow: 60px 20px 10px 50px red;
}
</style>
<body>
<div class="box"></div>
</body>效果：
内阴影
.box{
width:100px;
height:100px;
background-color: aquamarine;
margin:50px auto;
box-shadow:inset 0px 0px 10px 20px red;;
}效果：
多个阴影
- 如果一个盒子有多个阴影，则每个阴影之间用“，”（逗号）隔开
- 当阴影个数 > 1时，阴影应用的顺序为当前到后，第一个指定的阴影在最顶部显示
- 内阴影不管写在哪个位置，都会在外阴影上面
box-shadow: [inset] x偏移 Y偏移 模糊半径 [扩散半径] 颜色, [inset] x偏移 Y偏移 模糊半径 [扩散半径] 颜色, [inset] x偏移 Y偏移 模糊半径 [扩散半径] 颜色;
<style>
.box {
width: 100px;
height: 100px;
/* 背景颜色为橘黄色 */
background-color: orange;
margin: 50px auto;
/* 左上角和右下角圆半径为100px */
border-radius: 100px 0px 100px 0px;
border: 4px solid tomato;
/* 红色阴影，红色里面的黄色影阴,最外面的黄色阴影 */
box-shadow: 0px 0px 10px rgb(251, 9, 9), inset 0px 0px 20px yellow,
0px 0px 10px 30px yellow;
}
</style>
<body>
<div class="box"></div>
</body>效果：
去掉阴影
/*
none 为box-shadow的默认值，不设置阴影效果
当我们想去掉元素添加的阴影效果时，就可以设置box-shadow:none;
*/
box-shadow: none;实战案例-纸张效果
<style>
.page {
margin: 50px auto;
width: 400px;
height: 600px;
padding: 20px;
box-shadow: inset 0 -48px 48px rgba(0, 0, 0, 0.1), 0 0 0 2px rgb(255, 255, 255),
5px 5px 16px rgba(0, 0, 0, 0.3);
}
</style>
<body>
<div class="page"></div>
</body>效果：
text-shadow文字阴影
- text-shadow用来为文字添加阴影，如果要给文字添加多个阴影，多个阴影之间用“逗号”隔开
- 当阴影个数 > 1时，阴影应用的顺序应该为从前到后，第一个指定的阴影在最顶部显示
语法：
/* x偏移和Y偏移，值可以为正负整数 模糊半径 为0或大于0的整数 */ text-shadow: x偏移 Y偏移 模糊半径 颜色;
<style>
.box {
width: 100px;
height: 100px;
margin: 50px auto;
font-size: 100px;
/* 红色阴影 蓝色阴影 */
text-shadow: 0px 0px 10px rgb(251, 9, 9), 50px 10px 10px blue;
}
</style>
<body>
<div class="box">我</div>
</body>效果：
文本溢出显示省略号
单行文本和多行文本溢出隐藏并显示省略号...在实际项目开发中经常使用
单行文本溢出显示省略号
/* 文字不换行 */
white-space: nowrap;
/* 超出显示省略号 */
text-overflow: ellipsis;
/* 超出部分隐藏 */
overflow: hidden;<style>
p {
width: 200px;
height: 50px;
border: 1px solid #ddd;
line-height: 50px;
/* 文字不换行 */
white-space: nowrap;
/* 超出显示省略号 */
text-overflow: ellipsis;
/* 超出部分隐藏 */
overflow: hidden;
}
</style>
<body>
<p>当文字的内容超容器的宽度时，会显示3个省略号</p>
</body>
</html>效果：
多行文本溢出显示省略号
<style>
p {
width: 200px;
height: 100px;
border: 1px solid #ddd;
line-height: 50px;
/* 超出部分隐藏 */
overflow: hidden;
/* 超出部分显示省略号 */
text-overflow: ellipsis;
/* 对象做为弹性盒子模型显示 */
display: -webkit-box;
/* 块容器 中的内容限制为指定的行数。 */
-webkit-line-clamp: 2;
/* 弹性盒子对象的子元素排列方式为竖排 */
-webkit-box-orient: vertical;
}
</style>
<body>
<p>当文字的内容超容器的宽度时，会显示3个省略号当文字的内容超容器的宽度时，</p>
</body>效果：
注意：
- 只有当元素高度height = line-height * 行数时，效果才能正常显示
- 现代CSS布局多用flexbox实现
opacity设置元素不透明度
opacity属性指定了一个元素的”不透明度“，其属性值如下：
值 描述 0 元素完全透明(元素不可见) 值在0.0-1.0之间 元素半透明(元素后面的背景可见)，值越大，元素透明度越低 1 元素完全不透明（元素后面的背景不可见）
- opacity的值是一个0.0到1.0范围内的数字值，如果值超出这个范围，也有效，但是会被解析为在取值范围内最靠近它的值
- opacity设置透明度时，其里面的子元素和内容也会被透明掉。所以也可以用opacity:0来隐藏一个元素，及其里面的子元素一起隐藏掉
<style>
.item {
width: 100px;
height: 100px;
background-color: pink;
float: left;
margin: 10px 10px;
}
.item1 {
/* 不透明度 */
opacity: 0.8;
}
.item2 {
/* 不透明度 */
opacity: 0.5;
}
.item3 {
/* 不透明度 */
opacity: 0.1;
}
</style>
<body>
<div class="item item1">.item1</div>
<div class="item item2">.item2</div>
<div class="item item3">.item3</div>
</body>效果：
opacity的属性值不为1时，元素会创建自己的层叠上下文
<style>
.box {
width: 100px;
height: 100px;
}
.box1 {
background-color: skyblue;
/*
opacity的值不为1时，会创建层叠上下文
即opacity:0.7时，.box1会在.box2的上面显示
*/
opacity: 0.7;
}
.box2 {
background-color: pink;
margin-top: -50px;
margin-left: 30px;
}
</style>
<body>
<div class="box box1"></div>
<div class="box box2"></div>
</body>| .box1未设置不透明度或不透明度为1时 | .box1的不透明度opacity:0.7时 |
|---|---|
 |  |
与其它隐藏元素的方法对比
| 属性 | 说明 |
|---|---|
visiblity: hidden | 隐藏元素，但元素还占着原有的空间，在 DOM 树中 |
display: none | 元素隐藏，不占着原来空间，不在 DOM 树中 |
background-color: rgba(0,0,0,0.1) | 仅背景颜色透明，并不影响元素中的内容 |
opacity: 0 | 元素透明，连同其内容和子元素一起透明掉 |
overflow: hidden | 内容超出部分隐藏，影响的是子元素 |
filter滤镜 - 图片模糊
filter:blur()函数用于将高斯模糊效果应用于元素(图像)
语法：
/* 元素模糊度为50px */ filter: blur(50px);
<style>
.box {
width: 100px;
height: 100px;
background-color: red;
/* 模糊度 */
filter: blur(20px);
}
</style>
<body>
<div class="box"></div>
</body>效果：
object-fit 图片裁剪
object-fit属性指定“可替换元素”的内容应该 如何适应到其使用的高度和宽度确定的框
object-fit通过一下属性值，来切换被替换元素的内容对象在元素框内的对齐方式，有点类似于“backgroun-size”
- object-fit在对齐时，是在元素框中间向两边的方式来填充
- 而background-size默认是从左上角向右和下来填充的，而如果要设置从中间向两边，需要设置“background-position:center”
| 属性值 | 描述 |
|---|---|
| contain | 被替换的内容将被缩放，保持元素的宽高比，全部填充在内容框内。 |
| cover | 被替换的内容将被缩放，保持元素的宽高比，填满整个内容框。 |
| fill | 被替换的内容正好填充元素的内容框。内容可能会被拉伸或压缩变形 |
| none | 被替换的内容将保持其原有的尺寸。 |
| scale-down | 内容的尺寸与 none 或 contain 中的一个相同，取决于它们两个之间谁得到的对象尺寸会更小一些。 |
<style>
img {
width: 250px;
height: 200px;
border: 2px solid blue;
}
.contain {
/* object-contain 保持宽高比 填充在内容框中 */
object-fit: contain;
}
.cover {
/* cover 保持宽高比，填充满整个内容框 */
object-fit: cover;
}
.fill {
/* fill 被替换的内容正好填充元素的内容框。内容可能会被拉伸或压缩变形 */
object-fit: fill;
}
.none {
/* none 被替换的内容将保持其原有的尺寸 */
object-fit: none;
}
.scale-down {
/* scale-down 表示被替换内容尺寸为 none和 contain中最小的那一个 */
object-fit: scale-down;
}
</style>
<body>
<img src="images/hua1.jpg" alt="" class="contain" />
<img src="images/hua1.jpg" alt="" class="cover" />
<img src="images/hua1.jpg" alt="" class="fill" />
<img src="images/hua1.jpg" alt="" class="none" />
<img src="images/fish.png" alt="" class="scale-down" />
<img src="images/fish.png" alt="" class="contain" />
</body>效果：
应用
- 我们预想的是用户按1:1的大小来上传图片，但实际用户上传的图像比例是五花八门，就会造成图片被拉伸或挤压变形
- 我们可以添加“object-fit:cover”来等比例裁剪图片尺寸，这样图片就不会被拉伸或压缩，不过会有一部分图片被裁剪掉
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
width: 200px;
height: 200px;
border-radius: 50%;
/* 超出部分隐藏 */
overflow: hidden;
}
.box img {
width: 100%;
height: 100%;
/* 保持图片原有尺寸来裁剪 */
object-fit: cover;
}
</style>
<body>
<div class="box">
<img src="/static/jjy.png" alt="" />
</div>
</body>
</html>效果：
resize防止拖拽文本域
resize属性规定用户是否可以调整元素尺寸
<style>
.content textarea {
/* 文字与多行文本框垂直居中对齐 */
vertical-align: middle;
/* 不允许调整尺寸大小 */
resize: none;
}
</style>
<body>
<div class="content">
补充内容：
<textarea name="" id="" cols="30" rows="10"></textarea>
</div>
</body>calc函数
calc()函数用于动态计算长度值
/* 最终计算得到width:300px */ width: calc(100px + 200px);
- calc()函数支持 + - * /运算
- 运算符前后都需要保留一个空格，例如：“width:calc(100% - 10px);”
- * 和 /时，其前后可以没有空格，但建议留有空格
- 任何长度值都可以使用calc()函数进行计算
- 可以使用百分比、px、em、rem等单位
- calc()函数使用标准的数学运算优先级规则
<style>
.box {
/* 宽始终比浏览器小100px */
width: calc(100% - 100px);
height: 200px;
/* 水平居中 */
margin: 0px auto;
background-color: skyblue;
}
</style>
<body>
<div class="box"></div>
</body>var函数
:root选择器
::root选择器用于文档的(html)根元素
/* 页面背景色为红色 */ :root { background-color: red; }:root选择器与html选择器的区别
两者的唯一区别在于:root选择器的优先级要高于html选择器
var函数解读
var()函数用于插入自定义的属性值，如果一个属性值在多处被使用，该方法就很有用
- 自定义属性一定要以“--”开头
- 自定义属性会沿着父元素一直向外找，以最近找到的为主。写在后面的自定义属性会覆盖写在前面的
<style type="text/css">
:root {
/* 自定义属性 */
--font-color: red;
}
.box {
/* 自定义属性 */
--font-color: blue;
}
.item {
/* var函数调用自定义属性 */
color: var(--font-color);
}
</style>
<div class="box">
<div class="item">自定义属性的寻找原则：就近原则</div>
</div>效果：
- 通常自定义属性是写在“:root选择器”中，并且“:root选择器”会放在CSS的最上面
- 这样所有的选择器都能够用到这个自定义变量属性
<style type="text/css">
:root {
/* --开头，表示自定义属性 */
--font-color: red;
--font-size: 20px;
}
h3 {
/* 字体颜色为红色 */
color: var(--font-color);
}
p {
/* 字体大小为20px */
font-size: var(--font-size);
}
ul li {
font-size: var(--font-size);
color: var(--font-color);
}
</style>
<div class="box">
<h3>标题</h3>
<p>文本内容</p>
<ul>
<li>li中第1条</li>
<li>li中第2条</li>
</ul>
</div>效果：
扫一扫
212
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
