今天讲一下css绘画
纯CSS的绘画其实主要有几点。
首先开始讲一个css实现三角形的概念
当一个元素有了border的时候。
border足够大而元素尺寸足够小(0px)时
border-style:solid;
border-width:60px 60px 60px 60px;
border-color:green blue red black;
width: 0px;
height: 0px;
则会变成这个样子
而当上边框足够小 而下边框足够大
我们再把左右的颜色调成与背景一致。这个时候
我们就能得到一个基本的三角形
再说说border-radius这个属性
他可以让一个矩形边框有圆角
border-radius: x x x x;(上右下左 ps:css样式大多为这个顺序)
border-radius:100px;
width:300px;
height: 300px;
border:30px solid red;
margin: 300px;
实际上圆角的圆度是由R1跟R2两个半径决定的
例如设置border-top-right-radius and border-top-left-radius设置它的半径
我们还可以通过设置boder的值从而来使上下的宽度变少来改变形状
加一个border-top: 0px;
就像上面这个样子
我们可以通过这些技巧来完成一些简单的绘画
这真是太有趣了~~
还有说两个渐变
linear-gradient() 线性渐变
色标颜色变化按照平行线改变
radial-gradient() 径向渐变
色标颜色变化按照半径地扩散
还有一个投影css属性
box-shadow:x x x color;
前两个是长度值
表示在水平垂直方向上的偏移量
第三个数值表示模糊的成都
第四个是颜色值
实际上 box-shadow可以接收4个数值
box-shadow 第四个值是往外扩张多少。投影出去多少(当然可以接收一个负值)
box-shadow 还可以接收列表 绘制多层投影
box-shadow:x x x x color,
x x x x color,
x x x x color,;
这样就可以实现多层投影。而且投影是不会占据页面布局的，而且还是按照元素形状扩张投影
if you are 正方形 投影就是正方形
if you are 圆形 投影就是个圆形
pure css icon
one div
mark some website
文章总结来自观看css魔法的慕课分享视频所得
thanks
a book 《css secret》
还走在路上，希望走的越来越远
谢谢时间 不是大牛有一颗成为大牛的心
努力的堆时间法
2016年4月23日17:03:36
CSS 绘画
· HTMLandCSS, 前端技术