CSS还可以这样做

来源:转载

1.CSS还能做什么

CSS都知道是设置样式的,设个背景、字体大小什么的,当然还有布局也要用到的,这里主要是想看看CSS还能做什么?
参加笔试(具体公司不说了),用HTML5的canvas画一个圆环,对于canvas只知道是用来绘图的,没有实践过。不过可以用CSS做啊,之前研究过CSS可以画三角形,是时候表演CSS真正的技术了。

来个简单的,三角形,正方形和长方形就不演示了。

三角形

打个样:

 .triangle { width: 0; height: 0; border-top: 100px solid red; border-bottom: 100px solid blue; border-left: 100px solid yellow; border-right: 100px solid green; }

原理很简单,就是利用border属性,当宽高都为0时,设置border属性就是这样子的,关键是宽高都为0。如果想要下面的蓝色三角形,就把其他三个border的背景设为transparent,就像下面的样子:

也不一定需要四个方向上的border都设置,设置两个方向也可以做三角形,三个也可以,看下面的例子。

三角形就写到这里,想改变形状的话可以设置border的大小。

圆形

圆形利用了border-radius,这是一个CSS3的属性,主要是拿来画圆角的。
来个圆看看吧:

 .circle { width: 100px; height: 100px; border-radius: 50px; background: red; }

好圆,再来一个不圆的吧,那就是椭圆了。

 .circle { width: 200px; height: 100px; border-radius: 100px/50px; background: red; }

画圆的关键是理解:border-radius,这个属性需要好好谈一谈:
基本语法:border-radius : none | {1,4} [/ {1,4} ]? 这写的是啥?数学不好,符号太简洁了,还是喜欢搞几个例子看看。
首先它和border属性类似,不过有一些不一样:

  • 方向不是上下左右,而是左上角,右上角,右下角,左下角(按照顺时针方向),第一个画圆的例子,只画左上角的圆角,其他三个方向类似:
 .circle { width: 100px; height: 100px; border-top-left-radius: 50px; background: red; }

  • 数值代表的含义,如果只有一个就圆的半径,两个的话就分别是水平直径和垂直直径,不就是椭圆的半长轴和半短轴,比如上面的例子改一下,也不是很难:
 .circle { width: 200px; height: 100px; border-top-left-radius: 100px 50px; background: red; }

  • 至于椭圆的例子中的/符号,就是前面的代表四个方向的水平轴,后面的代表四个方向的垂直轴,最后来一个奇葩的:
 .circle { width: 200px; height: 200px; border-radius: 80px 70px 60px 50px / 40px 30px 20px 10px; background: red; }

这回就可以去完成开始提到的任务了,画一个圆环了,一个大圆里面套一个小圆,小圆背景和外面一样(不能设透明,那样就会显示大圆的背景),搞定!

 .big_circle { width: 200px; height: 200px; border-radius: 100px; background: red; position: relative; } .small_circle { width: 100px; height: 100px; border-radius: 50px; background: white; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; } <div class="big_circle"> <div class="small_circle"></div> </div

圆大概就这些了,主要学习了一个CSS3属性,border-radius的好处可是大大的。做按钮开关会很好看的,就不需要请求一张图片了。

其他图形

还有一个图形,对话框,笔试里见过,什么样子先看一下:

先直接上代码:

 .dialog { width: 300px; height: 200px; border: 5px solid red; position: relative; } .dialog:before { content: ''; position: absolute; height: 0; width: 0; left: 100%; top: 50px; border-top: 50px solid transparent; border-left: 50px solid red; border-bottom: 50px solid transparent; }

效果就是这样的:两个点,before伪类绝对定位,后面一个就不解释了,关于CSS的定位网上一抓一大把,之前也有过相关的总结。来看一看这个before是个什么鬼?
定义: :before 选择器在被选元素的内容前面插入内容,使用 content 属性来指定要插入的内容,并设置所插入内容的样式。这玩意拿来干什么用,举个例子,剧本里面通常有:
A:你好
B:你也好
A:你吃饭了吗
B:我吃过了,你呢?

不知道的以为在写剧本呢,每个人的台词前面都表明了这是谁说的。OK,这就可以用Before来做,例子呢:

 p.userA:before { content: 'A: '; color: red; } p.userB:before { content: 'B: '; color: blue; } <p class="userA">你好!</p> <p class="userB">你也好!</p> <p class="userA">你吃过饭了吗?</p> <p class="userB">我吃过了,你呢?</p>

怎么样?这是不是省了很多时间?回归正传,一个对话框其实就是一个矩形加一个三角形,使用before会感觉很炫吧。他还有一个兄弟after,这两都是伪元素,一个在前一个在后。
顺便把另外几个伪元素也拿出来::first-letter(第一个字符添加特殊样式),:first-line(文本的首行添加特殊样式)。

还能画什么

只有你想不到的,没有CSS不能画的,列个地址,里面都是CSS画的。

http://www.htmleaf.com/ziliaoku/qianduanjiaocheng/201504051631.html

分享给朋友:
您可能感兴趣的文章:
随机阅读: