码迷,mamicode.com
首页 > Web开发 > 详细

CSS--border

时间:2017-06-08 18:06:16      阅读:153      评论:0      收藏:0      [点我收藏+]

标签:变换   image   code   设置   http   sha   通过   span   百分比   

1、border-width不支持百分比。

2.border-style:

solid实线,dashed虚线,dotted点线;double双线;inset内凹;outset外凹;groove沟槽;ridge山脊;

3.border-color:上边距颜色 右 下 左

通常设置border-color为一种颜色,但是可以设置四种边框的颜色

   width:80px;height:80px;
  border-width: 100px; border-style: solid; border-color: red green yellow blue;

技术分享

变换为三角形:

将下方和左边的颜色设置为透明,上方和右边设置为红色。设置为三角形图案

 width: 0px;
 height: 0px;
 border-width: 80px;
 border-style: solid;
 border-color:red red transparent transparent;

技术分享

设置三角卷纸动画:

通过设置border上方和右方颜色为白色,下方和左边的颜色为半透明,从而达到这个效果。

 box-shadow: 0 1px 1px rgba(0,0,0,0.3),-1px 1px 1px rgba(0,0,0,0.2);
 transition: all 0.4s ease-in;

技术分享

 

CSS--border

标签:变换   image   code   设置   http   sha   通过   span   百分比   

原文地址:http://www.cnblogs.com/moxuexiaotong/p/6963715.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!