css的多用性
使用简单的css样式可以实现多种
- css画出三角形
- css画出原形
- css画出椭圆
- css画出八卦图
- css画出正方环图
css基本介绍
层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。
css主要用于控制页面显示的样式,用于和用户交互的第一现场,页面写的好不好看,css的使用至关重要
三角形
**主要代码如下:
div{
width:0px;
height:0px;
border-left:20px solid transparent;
border-right:20px solid transparent;
border-top:20px solid #000;
border-bottom:0px;
}
简单说明:首先设置个可见的div,四边分别设置相同px的border宽度,再将div的高度和宽度去掉,剩余四个border组成的四边形,上下或者左右选择两个边设置透明度 ,在取消一个border,便出现了三角形,这个transparent属性透明的意思。
###圆形
**主要代码如下:
div{
width:100px;
height:100px;
border-radius:60px;
backgroud-color:#000;//黑色
}
设置border-radius即圆角为宽和高的一半即可。
椭圆
**主要代码如下:
div{
width:100px;
height:50px;
border-radius:100px/50px;
backgroud-color:#000;
}
border-radius:设置圆角,值可以有一到四个 分别设置top-left、top-right、bottom-right、bottom-left 。
八卦图
**主要代码如下:
div{
width: 0px;
height: 0px;
border-left:50px solid #fff;
border-right:50px solid #fff;
border-top:50px solid #000;
border-bottom:50px solid #000;
border-radius:50px;
transform: rotate(45deg)
}
border-radius:设置圆角,圆角值和border值一样,便会出现⚪ ,颜色区分开,效果图如下
正方形变色环
**主要代码如下:
div1 {
position: relative;
width: 180px;
height: 180px;
background: #9c27b0;
border: 50px dashed #2196f3;
/* background-clip: content-box; 默认为border-box*/ 图片显示范围 border-box 则从border开始显示
}
div1::after {
content: "";
position: absolute;
top: 0px;
left: 0px;
bottom: 0px;
right: 0px;
background: #fff;
}
这里使用了伪元素 ::after 使用伪元素遮盖住内框的background ,这里设置 top left bottom 和 right 是为了使方块离所有边框的距离一致。效果图如下:
先写到这里,后续的再慢慢补充吧