一、效果图
二、边框和渐变着色
<!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>
</head>
<style>
.box {
display: flex;
justify-content: flex-start;
align-items: flex-start;
flex-wrap: wrap;
}
/* 左边竖条实现方法 */
.left_line {
200px;
height: 80px;
background: #eeeeee;
margin-top: 20px;
}
/* 使用border */
.left_line_one {
border-left: 4px solid #645264;
}
/* 伪元素 */
.left_line_two {
position: relative;
}
.left_line_two::after {
content: "";
position: absolute;
left: 0px;
top: 0px;
4px;
height: 80px;
background: greenyellow;
line-height: 80px;
}
/* box-shadow */
.left_line_three {
/* 竖条在div里 */
box-shadow: inset 4px 0px 0 0 deeppink;
/* 竖条在div外 */
/* box-shadow: 4px 0px 0 0 deeppink; */
}
/* css3渐变 */
.left_line_four {
background-image: linear-gradient(90deg, deeppink 0px, deeppink 4px, transparent 4px);
}
/* 条纹边框 */
.tiaowen_border {
position: relative;
180px;
height: 180px;
margin-left: 30px;
margin-top: 20px;
}
.tiaowen_border_one {
background: #9c27b0;
border: 20px dashed #2196f3;
}
.tiaowen_border_one::after {
content: "";
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: #fff;
}
.tiaowen_border_two {
background: #fff;
background-clip: padding-box;
border: 20px dashed greenyellow;
}
.tiaowen_border_two::before {
content: "";
position: absolute;
top: -20px;
left: -20px;
bottom: -20px;
right: -20px;
background: #996699;
z-index: -1;
}
.tiaowen_border_two img {
100%;
height: auto;
}
.jianbian {
400px;
height: 100px;
margin-left: 100px;
margin-bottom: 20px;
}
.jianbian_one {
background: linear-gradient(90deg, #ffc700 0%, #e91e1e 100%);
animation: gradientChange 2s infinite;
}
@keyframes gradientChange {
100% {
background: linear-gradient(90deg, #e91e1e 0%, #6f27b0 100%);
}
}
.jianbian_two {
background: #ffc700;
animation: gradientChangetwo 3s infinite;
}
@keyframes gradientChangetwo {
50% {
background: #e91e1e;
}
100% {
background: #ffc700;
}
}
.jianbian_three {
background: linear-gradient(90deg, #ffc700 0%, #e91e1e 50%, #6f27b0 100%);
background-size: 200% 100%;
background-position: 0 0;
animation: bgposition 2s infinite linear alternate;
}
@keyframes bgposition {
0% {
background-position: 0 0;
}
100% {
background-position: 100% 0;
}
}
</style>
<body>
<div class="box">
<!-- 左边竖条实现方法 -->
<div>
<div class="left_line_one left_line"></div>
<div class="left_line_two left_line"></div>
<div class="left_line_three left_line"></div>
<div class="left_line_four left_line"></div>
</div>
<!-- 其他的还有drop-shadow 是 CSS3 新增滤镜 filter 中的其中一个滤镜，也可以生成阴影；outline(不推荐使用)；改变滚动条样式 -->
<!-- 条纹边框的实现:
第一种方法：利用border:20px dashed #996699描绘出边框，用伪元素画一个背景
第二种方法和第一种方法差不多，不过利用了css3中的background-cli这个属性
background-cli:规定背景的绘制区域;默认值为no
border-box 背景被裁剪到边框盒。 测试
padding-box 背景被裁剪到内边距框。 测试
content-box 背景被裁剪到内容框。-->
<div>
<div class="tiaowen_border_one tiaowen_border"></div>
<div class="tiaowen_border_two tiaowen_border"></div>
<div class="tiaowen_border_two tiaowen_border">
<img src="https://ss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=3644783065,679437688&fm=173&app=25&f=JPEG?w=640&h=360&s=E55AAE76495050C0924429EF0300A022"
alt="">
</div>
</div>
<!-- 背景色渐变动画 -->
<div>
<div class="jianbian jianbian_one"></div>
<div class="jianbian jianbian_two"></div>
<!-- 总结一下，线性渐变（径向渐变）是不支持 animation 的，单色的 background 是支持的。 -->
<!-- 背景色渐变动画 -->
<!-- 通过 background-position 模拟渐变动画 -->
<div class="jianbian jianbian_three"></div>
<!-- 通过 background-size 模拟渐变动画 这个跟上面的一样的操作；这两个会用大量的重绘，页面性能消耗大，-->
</div>
</div>
<script>
</script>
</body>
</html>