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>