CSS3
关注
分享
扫一扫
Fade Away
这个作者很懒，什么都没留下…
展开
-
transform-orign
百分比：旋转中心相对于左上角的偏移 transform-orign原创 2019-04-05 22:00:33 · 109 阅读 · 0 评论 -
太极的两种画法
1.利用两个全等的矩形拼成一个正方形，再将其变成两个半圆，凑在一起就是一个正圆 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> body{ background-color: gra...原创 2019-04-05 22:10:27 · 559 阅读 · 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 · 1205 阅读 · 0 评论 -
制作弧形箭头
1.制作准备 2.将box2设置成1/4圆得到 3.再旋转即可原创 2019-04-10 16:05:33 · 803 阅读 · 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 · 151 阅读 · 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 · 214 阅读 · 0 评论 -
box-shadow再回首
box-shadow: 0 0 0 10px #dddddd; Type Outset,Inset,默认outset XOffset,YOffset x,y 偏移 Blur 模糊程度 Spread 扩展 通常用法 1.作为元素内|外阴影 outset spread为0，就会获得和元素本身相同大小的shadow,可以制作成其他效果，比如loading… 2.SPr...原创 2019-04-08 14:17:32 · 182 阅读 · 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 · 1136 阅读 · 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 · 295 阅读 · 0 评论