CSS-圆角、阴影、文本图像处理、函数【看这一篇就够了！！！】

圆角

border-radius用来设置元素的（四个方向）外边框“1/4”的圆角效果

圆角类型	描述	举例
圆角边框	当使用一个半径时确定一个圆	border-radius:50px;
椭圆边框	当使用两个半径时确定一个椭圆第一个值是椭圆水平半径第二个值是椭圆垂直半径	border-radius:50px/30px;

圆角类型

描述

举例

圆角边框

当使用一个半径时确定一个圆

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来隐藏一个元素，及其里面的子元素一起隐藏掉

值	描述
0	元素完全透明(元素不可见)
值在0.0-1.0之间	元素半透明(元素后面的背景可见)，值越大，元素透明度越低
1	元素完全不透明（元素后面的背景不可见）

<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>

效果：