CSS3
关注
分享
扫一扫
Fade Away
这个作者很懒，什么都没留下…
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
transform-orign
百分比：旋转中心相对于左上角的偏移transform-orign原创 2019-04-05 22:00:33 · 123 阅读 · 0 评论 -
太极的两种画法
1.利用两个全等的矩形拼成一个正方形，再将其变成两个半圆，凑在一起就是一个正圆<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> body{ background-color: gra...原创 2019-04-05 22:10:27 · 590 阅读 · 0 评论 -
border-top border-left border-right border-bottom
.box{ /* width: 100px; height: 100px; */ width: 0; border-top:50px solid red; border-right:50px solid green; }原创 2019-04-10 15:57:46 · 1263 阅读 · 0 评论 -
制作弧形箭头
1.制作准备2.将box2设置成1/4圆得到3.再旋转即可原创 2019-04-10 16:05:33 · 897 阅读 · 0 评论 -
利用skew实现对话框制作
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> .parallelogram { width: 150px; height: 100px; transform: s...原创 2019-04-10 16:22:45 · 171 阅读 · 0 评论 -
CSS3 背景属性 backgrund-clip
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> .bordertest { border: 30px solid red; /* background: green; */ ...原创 2019-04-08 12:31:06 · 238 阅读 · 0 评论 -
box-shadow再回首
box-shadow: 0 0 0 10px #dddddd;TypeOutset,Inset,默认outsetXOffset,YOffsetx,y 偏移Blur模糊程度Spread扩展通常用法1.作为元素内|外阴影 outsetspread为0，就会获得和元素本身相同大小的shadow,可以制作成其他效果，比如loading…2.SPr...原创 2019-04-08 14:17:32 · 205 阅读 · 0 评论 -
CSS3 calc rem [css的计算器]
html{font-size: calc(100vw/7.5);} /* 每一个像素的vw 50px 就乘以这个1vw */ body{font-size: .24rem;}1vw 是屏幕的百分之一100vw/7.5 = 1rem[相对根元素html的度量单位]后面的数据都除以了100，相当于除以了750，实际使用像素是750，也就是每一个像素是100vw/750,再将实际测得的像素*re...原创 2019-03-12 15:22:36 · 1163 阅读 · 0 评论 -
用outline制作多层边框
.div_border { margin: 200px auto; height: 100px; width: 200px; background: #655; /* border-radius: 10px; */ outline: 80px solid green; outline-offset: 28px; border: 50...原创 2019-04-08 14:43:26 · 333 阅读 · 0 评论