CSS 轮廓(outline)

轮廓(outline)是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用。

轮廓(outline)属性指定元素轮廓的样式、颜色和宽度。


轮廓(outline)实例

在元素周围画线
本例演示使用outline属性在元素周围画一条线。

设置轮廓的样式
本例演示如何设置轮廓的样式。

设置轮廓的颜色
本例演示如何设置轮廓的颜色。

设置轮廓的宽度
本例演示如何设置轮廓的宽度。


CSS 轮廓(outline)

轮廓(outline)是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用。

CSS outline 属性规定元素轮廓的样式、颜色和宽度。


所有CSS 轮廓(outline)属性

"CSS" 列中的数字表示哪个CSS版本定义了该属性(CSS1 或者CSS2)。

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

原文地址:https://www.cnblogs.com/fewfwf/p/11828687.html

时间: 2024-10-15 01:15:43

CSS 轮廓(outline)的相关文章

CSS 轮廓---outline属性

http://www.w3school.com.cn/css/css_outline.asp

css盒子模型、边框border、外边距margin、填充padding、轮廓outline

盒子模型 一个盒子包括外边距.边框.内边距和实际内容 Margin(外边距):清除边框外的区域,外边距是透明的. Border(边框):围绕在内边距和外边距的边框. Padding(内边距):清除内容周围的区域,内边距是透明的. Content(内容):盒子的内容,显示文本和图像. 例如下面一个例子 <!DOCTYPE html> <html> ······ <style> div { background-color: lightgrey; width: 300px;

HTML 学习笔记 CSS(轮廓)

轮廓(outline)是绘制于元素周围的一条线 位于边框边缘的外围 可起到突出元素的作用 CSS outline属性规定元素轮廓的样式 颜色和宽度 话不多说 来几个例子 看一看 1:在元素周围画线 <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> p { border: red solid t

css中 outline 的使用

CSS中outline属性是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用. 例如:在浏览器里,当鼠标点击或使用Tab键让一个链接或者一个radio获得焦点的时候,该元素将会被一个轮廓虚线框围绕.这个轮廓虚线框就是outline . 一.outline可以按顺序设置如下属性 outline-color :设置元素轮廓的颜色,其取值与border-color类似.只有当outline-style不为none时才有效.默认为transparent. outline-style :设

CSS轮廓

使用轮廓突出元素作用 outline 设置轮廓属性 outline-color 设置轮廓颜色 outline-style 设置轮廓样式 outline-width 设置轮廓宽度 1.示例代码 <!DOCTYPE html><html><head><meta charset="utf-8"> <title>CSS轮廓</title> <style> p{outline-style: dotted;outl

轮廓Outline|表格Table实例

1.使用outline属性在元素周围画一条线. border:red solid thin; outline:#00ff00 dotted thick; outline-style:dotted|dashed|solid|double|groove|ridge|inset|outset; outline-color:#00ff00; 2.设置轮廓的宽度 border:red solid thin; outline-style:solid; outline-width:thin; outline-

【CSS3】透明度opacity与rgba()区别、光标cursor、display、轮廓outline与margin及border区别、em和rem区别

1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <style type="text/css"> 7 div{ 8 width: 300px; 9 height: 200px;/*浏览器默认字体大小16px*/ 10 margin:1em;/*em以父元素字体为基准*/ 1

css之outline以及transparent

outline:none;这句代码可以很好地去处链接点击过后出现的虚线 border:transparent边框透明,不支持IE

css基础 outline:none 取消input的 鼠标点击时蓝色的框框 效果

礼悟:    公恒学思合行悟,尊师重道存感恩.叶见寻根三返一,江河湖海同一体.          虚怀若谷良心主,愿行无悔给最苦.读书锻炼养身心,诚劝且行且珍惜.              ide:visual studio 2017             browser:Chrome                     os:win7 代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8&qu