你的位置:首页 > 软件开发 > 网页设计 > 重温CSS:Border属性

重温CSS:Border属性

发布时间:2016-01-28 09:00:07
边界是众所周知的,有什么新的东西吗?好吧,我敢打赌,在这篇文章中,有很多你不看永远不知道的东西!不仅可以用CSS3来创建圆角,使用原有CSS一样可以显示自定义图形。这是正确的(有待考究);在过去,没发现这种技术之前,我们可能使用背景图像定位来显示一个园或箭头。幸运的是,我们能放下 ...

重温CSS:Border属性

边界是众所周知的,有什么新的东西吗?好吧,我敢打赌,在这篇文章中,有很多你不看永远不知道的东西!

不仅可以用CSS3来创建圆角,使用原有CSS一样可以显示自定义图形。这是正确的(有待考究);在过去,没发现这种技术之前,我们可能使用背景图像定位来显示一个园或箭头。幸运的是,我们能放下PS图象处理软件了。

基础

你可能很熟悉边的最基本用法。

border: 1px solid black;

虽然乍看起来单个属性的方式没必要,但有极少数的情况下,当它是有利的,例如当你需要在特定的事件发生时更新边的部分属性。

也许你需要在用户将鼠标悬停在一个特定的元素上时改变这个元素的边框颜色。使用复合属性需要重复像素值和边的样式。

box {  border: 1px solid red;  } .box:hover {  border: 1px solid green;}

如你所料,我们可以为每个角指定不同的值。

重温CSS:Border属性
.lemon {  width: 200px; height: 200px;  background: #F5F240;  border: 1px solid #F0D900;    border-radius: 10px 150px 30px 150px;}
重温CSS:Border属性

 

重温CSS:Border属性重温CSS:Border属性重温CSS:Border属性
.box { width: 200px; height: 200px; background: #e3e3e3; position: relative;  border: 10px solid green; } /* 创建和容器宽度相同的两个容器 */.box:after, .box:before { content: ''; position: absolute; top: 0; left: 0; bottom: 0; right: 0;} .box:after { border: 5px solid red; outline: 5px solid yellow;} .box:before { border: 10px solid blue;}
重温CSS:Border属性

 

重温CSS:Border属性
.box {  border: 5px solid red;   box-shadow:    0 0 0 5px green,    0 0 0 10px yellow,    0 0 0 15px orange;}
重温CSS:Border属性重温CSS:Border属性
.box {  width: 200px; height: 200px;  background: #666;   border-top-left-radius: 15em 1em;  border-bottom-right-radius: 15em 1em; }
重温CSS:Border属性重温CSS:Border属性
.arrow { width: 0; height: 0;  border-top: 100px solid red; border-right: 100px solid green; border-bottom: 100px solid blue; border-left: 100px solid yellow; }
重温CSS:Border属性

在本章的开始,更清洁的语法是不使用复合语法:

重温CSS:Border属性

很有趣,不是吗?不过,当我们后退一步时更有趣。现在,如果我们将除了蓝边之外的所有的border-colors设置为透明的将会怎样?

.arrow { width: 0; height: 0;  border: 100px solid; border-bottom-color: blue;}
重温CSS:Border属性
.speech-bubble {  position: relative;  background-color: #292929;   width: 200px;  height: 150px;  line-height: 150px; /* 垂直居中 */   color: white;  text-align: center;}
重温CSS:Border属性

 

重温CSS:Border属性
.speech-bubble:after { content: ''; position: absolute;  width: 0; height: 0;  border: 10px solid; border-color: red green blue yellow;}
重温CSS:Border属性重温CSS:Border属性
.speech-bubble:after { content: ''; position: absolute;  width: 0; height: 0;  border: 10px solid; border-top-color: red;}
重温CSS:Border属性重温CSS:Border属性
.speech-bubble:after { content: ''; position: absolute;  width: 0; height: 0;  border: 15px solid; border-top-color: red;  top: 100%; left: 50%;}
重温CSS:Border属性重温CSS:Border属性
.speech-bubble {  /* … 其他样式 */  border-radius: 10px;} .speech-bubble:after { content: ''; position: absolute;  width: 0; height: 0;  border: 15px solid; border-top-color: #292929;  top: 100%; left: 50%; margin-left: -15px; /* 调整边框宽度 */}
重温CSS:Border属性

 

重温CSS:Border属性
/*  对话气泡重温CSS:Border属性
.speech-bubble { /* 其他样式 */  display: table;} .speech-bubble p { display: table-cell; vertical-align: middle;}
重温CSS:Border属性

 

重温CSS:Border属性重温CSS:Border属性

总结

虽然最简单的border:1px solid black语法很有帮助,如果我们聪明,我们可以创建各种有益的效果,图标和形状。谁会想到边界可以如此强大?关键是要记住常见的形状或对话框的样式应该只被创建一次,然后抽象出来实用的类为将来使用。

原文:CSS Refreshers: Borders


原标题:重温CSS:Border属性

关键词:CSS

CSS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。