border-radius的8个属性值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div{
width: 100px;
height: 100px;
margin: 100px 100px;
border: 2px solid red;
/* x轴 上1 右2 下3 左4/y轴上5 右6 下7 左8*/
border-radius:5px 10px 15px 20px/15px 20px 30px 50px;}
</style>
</head>
<body>
<div></div>
</body>
</html>
如果后面四个参数不传，默认等于前面四个参数，开发中常用前面四个参数，后面四个参数一般默认保持和前面一样就行了
box-shadow 的全部属性值：第四个属性比较少用
应用1：不使用border，创建边框
<style type="text/css">
div {
width: 100px;
height: 100px;
background: red;
box-shadow: 0 0 0 2px blue;
}
</style>
<body>
<div></div>
</body>
应用2：inset 创建内阴影，美化图片等等
box-shadow可以设定多组效果，每组参数值以逗号分隔。
规则： 先设置的优先级大，可以覆盖后设置的
<style type="text/css">
div {
width: 100px;
height: 100px;
background: red;
box-shadow: 0 0 0 5px blue,
0 0 0 10px purple;
}
</style>
<body>
<div></div>
</body>
应用3： 利用多组box-shaow效果的规则，实现双边框照相效果
background-repeat:round | space
默认背景图像在横向和纵向平铺，且平滑平铺
设置background-repeat:space后背景图像以相同的间距平铺且填充满整个容器或某个方向。（CSS3）
<style>
.wrapper {
background-image: url(2.jpg);
background-size: 100px 100px;
height: 100px;
background-repeat: space;
}
</style>
<body>
<div class="wrapper"></div>
</body>
而设置background-repeat:round后，平铺的时候，空间足够则平铺出新的一张图片，空间不够则进行拉伸（CSS3）
E::selection { Rules }：
设置对象被选择时的样式。
需要注意的是，::selection只能定义被选择时的background-color，color及text-shadow
Text-gradient文字渐变：
<style>
.wrapper {
font-weight: 600;
font-size: 25px;
margin-bottom: 0px;
cursor: pointer;
background-image: -webkit-linear-gradient(bottom, red, #ff5f60, #f0c41b);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
</style>
<div class="wrapper">
有时候，一些项目的指定位置
</div>
filter:
常用的三个属性值：
filter: blur(5px); 给图像设置高斯模糊。
filter: contrast(200%); 调整图像的对比度。
filter: grayscale(80%); 将图像转换为灰度图像。
三个属性值应用效果如下：
pointer-events: none
这个pointer-events属性有很多可以使用的属性值，但大部分都是针对SVG的，其中none值能阻止点击、状态变化和鼠标指针变化：
设置为none值它能够：
- 阻止用户的点击动作产生任何效果
- 阻止缺省鼠标指针的显示
- 阻止CSS里的hover和active状态的变化触发事件
- 阻止JavaScript点击动作触发的事件
<style>
.wrapper {
width: 100px;
height: 100px;
background: red;
pointer-events: none;
}
.wrapper:hover{
background: yellow;
}
</style>
<div class="wrapper"></div>
<script type="text/javascript">
document.querySelector(".wrapper").onclick= function(){
console.log(1)
}
</script>
鼠标移上去和点击均无效
mix-blend-mode混合模式
CSS 属性描述了元素的内容应该与元素的直系父元素的内容和元素的背景如何混合
<style>
.wrapper {
width: 400px;
background: url(2.jpg);
height: 400px;
font-size: 40px;
text-align: center;
}
h3{
mix-blend-mode: overlay;
line-height: 500px;
}
</style>
<div class="wrapper">
<h3>元素的直系父元素</h1>
</div>
shape-outside:
shape-outside的CSS 属性定义了一个可以是非矩形的形状，相邻的内联内容应围绕该形状进行包装。 默认情况下，内联内容包围其边距框; shape-outside提供了一种自定义此包装的方法，可以将文本包装在复杂对象周围而不是简单的框中。
<style>
width: 100px;
height: 100px;
border-radius: 50%;
background: red;
float: left;
shape-outside: circle(50%);
}
</style>
<div class="wrapper">
<div class="circle"></div>
<p>
.......
</p>
</div>
Gradient-border渐变边框：
不是直接通过设置属性实现，取巧的方式实现
<style type="text/css">
.wrapper {
width: 200px;
height: 200px;
background: #ccc;
position: relative;
}
.wrapper::after{
content: "";
position: absolute;
background: linear-gradient(0deg,orange,red);
width: 220px;
height: 220px;
z-index: -1;
top: -10px;
left: -10px;
}
</style>
<div class="wrapper"></div>
text-transform:
有的时候需要让英文单词或拼音首个字母大写;有的时候需要让全文中英文单词全大写或小写。这时候我们就需要text-transform属性了
<style type="text/css">
/*首字母大写*/
.a {
text-transform:capitalize;}
/*全都是大写*/
.b {
text-transform:uppercase;}
/*全都是小写*/
.c {
text-transform:lowercase;}
</style>
<body>
<div class="a">
首字母大写→ni hao hello
</div>
<div class="b">
字母全实现大写→ni hao hello
</div>
<div class="c">
字母全实现小写→ni HAo hEllo
</div>
</body>