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;outline-color: coral;outline-width: 5px;width: 100px;height: 50px;line-height: 50px;
text-align: center}/*相当于div边框*/
</style>
</head>
<body>
<p>文字的轮廓</p>
</body>
</html>

2、示例效果

时间: 2024-11-14 19:02:53

CSS轮廓的相关文章

CSS 轮廓(outline)

轮廓(outline)是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用. 轮廓(outline)属性指定元素轮廓的样式.颜色和宽度. 轮廓(outline)实例 在元素周围画线本例演示使用outline属性在元素周围画一条线. 设置轮廓的样式本例演示如何设置轮廓的样式. 设置轮廓的颜色本例演示如何设置轮廓的颜色. 设置轮廓的宽度本例演示如何设置轮廓的宽度. CSS 轮廓(outline) 轮廓(outline)是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用.

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属性

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;

css基础学习

1.css基础语法 Css规则由两个主要的部分组成:选择器,声明. Selector{declaration1;...declarationN;} 如: H1 { font-size : 32px; color : blue } H1:选择器 Font-size:32px,color:blue:声明 2.css的三种定义方法 内联式: <h1 style="font-size:20px;color:red">内联式</h1> 嵌入式: <style typ

CSS学习(二)

列表 在HTML中,有两种类型的列表: 无序列表 - 列表项标记用特殊图形(如小黑点.小方框等) 有序列表 - 列表项的标记有数字或字母 使用CSS,可以列出进一步的样式,并可用图像作列表项标记. 所有的CSS列表属性 属性 描述 list-style 简写属性.用于把所有用于列表的属性设置于一个声明中 list-style-image 将图象设置为列表项标志. list-style-position 设置列表中列表项标志的位置. list-style-type 设置列表项标志的类型. CSS

Web学习之css

CSS指层叠样式表(Cascading Style Sheets),CSS 是标准的布局语言,用来控制元素的尺寸.颜色.排版.CSS 由 W3C 发明,用来取代基于表格的布局.框架以及其他非标准的表现方法.样式 (style) 定义如何显示 HTML 元素:样式通常存储于样式表中:外部样式表存储于 CSS 文件中. CSS可以解决html代码对样式定义的重复,提高了后期样式代码的可维护性,并增强了网页的显示效果功能.简单一句话:CSS将网页内容和显示样式进行分离,提高了显示功能. 1.CSS基础

CSS 高级

1.CSS 盒模型(Box Model) 所有 HTML 元素都可以看作是盒子,在 CSS 中,“Box Model”这一术语主要是在布局时使用. CSS 盒模型(Box Model)规定了处理元素内容.边框.内边距 和 外边距 的方式. CSS 盒模型本质上是一个盒子,封装周围的 HTML 元素,它包括:外填充也叫外边距(margin),边框(border),内填充也叫内边距(padding)和实际内容(content).盒模型允许我们在其它元素和周围元素边框之间的空间放置元素. 如下 CSS

CSS基础学习十二:CSS样式

CSS样式包括:CSS背景,CSS文本,CSS字体,CSS列表,CSS表格,CSS轮廓等样式.我们就目前用到的 CSS样式简单地介绍一下. 下面只是总结性的一些东西,具体的可以参考:CSS样式教程 (1)背景色 background-color 设置背景颜色 可能的值: 颜色名称:如red,yellow,blue 十六进制颜色值:如#ffffff rgb颜色值:如rgb(255,255,255(十六进制为ff)) transparent:默认的,背景颜色透明 inherit:继承父元素的背景色