如何用css样式设置元素的轮廓

作者:前端大碗茶儿日期:2016-09-03 20:30:20 点击:284 html css css3

CSS 边框属性(border)

在 HTML 中,我们使用表格来创建文本周围的边框,但是通过使用 CSS 边框属性,我们可以创建出效果出色的边框,并且可以应用于任何元素。

  • 边框有四个方向,并且可以单独设置某一个方向;
  • 边框必须设置样式,也就是border-style属性;
  • 边框默认颜色是黑色。
<style>
input[type=text]{
border-top:1px dotted #ff0000;
border-top-width:1px;
border-top-style:dotted;
border-top-color:#ff0000;

border-left:1px dotted #ff0000;
border-left-width:1px;
border-left-style:dotted;
border-left-color:#ff0000;

border-right:1px dotted #ff0000;
border-right-width:1px;
border-right-style:dotted;
border-right-color:#ff0000;

border-bottom:1px dotted #ff0000;
border-bottom-width:1px;
border-bottom-style:dotted;
border-bottom-color:#ff0000;

}

</style>

属性 说明
border 简写属性,用于把针对四个边的属性设置在一个声明
border-color 设置边框的颜色
border-style 设置边框的样式
border-top-width 设置上边框的宽度
border-top-style 设置上边框的样式
border–top-color 设置边框的颜色
border-top 设置左边框的宽度、样式和颜色(简写)

ps:其他方向的边框也可以这样书写;
ps:利用 transparent,使用边框就像是额外的内边距一样;此外还有一个好处,就是能在你需要的时候使其可见。这种透明边框相当于内边距,因为元素的背景会延伸到边框区域(如果有可见背景的话)

<style>
a:link, a:visited {
border-style: solid;
border-width: 5px;
border-color: transparent;
}

a:hover {border-color: red;}
</style>

CSS 轮廓属性(Outlines)

轮廓(outline)是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用。
轮廓(outline)属性指定了样式,颜色和外边框的宽度。


属性 说明
outline 在一个声明中设置所有的外边框属性 outline-color、outline-style、outline-width、inherit
outline-color 设置外边框的颜色 color-name、hex-number、rgb-number、invert、inherit
outline-style 设置外边框的样式 none、dotted、dashed、solid、double、groove、ridge、inset、outset、inherit
outline-width 设置外边框的宽度 thin、medium、thick、length、inherit

<style>
input[type=text]{
outline:1px dotted #ff0000;
}

</style>

上一篇: html标签和html属性

下一篇: 如何使用css的伪元素