CSS 轮廓（Outline)实例

CSS 实例

  • CSS 背景实例
  • CSS 文本实例
  • CSS 字体(font)实例
  • CSS 边框(border)实例
  • CSS 外边距 (margin) 实例
  • CSS 内边距 (padding) 实例
  • CSS 列表实例
  • CSS 表格实例
  • 轮廓（Outline)实例
  • CSS 尺寸 (Dimension) 实例
  • CSS 分类 (Classification) 实例
  • CSS 定位 (Positioning) 实例
  • CSS 伪类 (Pseudo-classes)实例
  • CSS 伪元素 (Pseudo-elements)实例

01在元素周围画线

<!DOCTYPE html>

<html>

	<head>

		<meta charset="utf-8" />

		<title>01在元素周围画线</title>

		<style type="text/css">

			p {

				border: darkorange solid thin;

				outline: salmon dotted thick;

			}

		</style>

	</head>

	<body>

		<p>我是一个有border有outline的段落。</p>

	</body>

</html>

02设置轮廓的颜色

<!DOCTYPE html>

<html>

	<head>

		<meta charset="utf-8" />

		<title>02设置轮廓的颜色</title>

		<style type="text/css">

			p {

				border: darkorange solid thin;

				outline-color: skyblue;

				outline-style: double;

			}

		</style>

	</head>

	<body>

		<p>我是一个有border有outline的段落。</p>

	</body>

</html>

03设置轮廓的样式

<!DOCTYPE html>

<html>

	<head>

		<meta charset="utf-8" />

		<title>03设置轮廓的样式</title>

		<style type="text/css">

			p {

				border: darkorange solid thin;

			}

			p.dotted {

				outline-style: dotted;

			}

			p.dashed {

				outline-style: dashed;

			}

			p.solid {

				outline-style: solid;

			}

			p.double {

				outline-style: double;

			}

			p.groove {

				outline-style: groove;

			}

			p.ridge {

				outline-style: ridge;

			}

			p.inset {

				outline-style: inset;

			}

			p.outset {

				outline-style: outset;

			}

		</style>

	</head>

	<body>

		<p class="dotted">A dotted outline</p>

		<p class="dashed">A dashed outline</p>

		<p class="solid">A solid outline</p>

		<p class="double">A double outline</p>

		<p class="groove">A groove outline</p>

		<p class="ridge">A ridge outline</p>

		<p class="inset">An inset outline</p>

		<p class="outset">An outset outline</p>

	</body>

</html>

04设置轮廓的宽度

<!DOCTYPE html>

<html>

	<head>

		<meta charset="utf-8" />

		<title>04设置轮廓的宽度</title>

		<style type="text/css">

			p.one {

				border: seagreen solid thin;

				outline-style: solid;

				outline-width: thin;

			}

			p.two {

				border: seagreen solid thin;

				outline-style: dotted;

				outline-width: 3px;

			}

		</style>

	</head>

	<body>

		<p class="one">我是一个段落啊。</p>

		<p class="two">我是一个段落啊。</p>

	</body>

</html>

W3School-CSS 轮廓（Outline)实例的更多相关文章

  1. CSS轮廓outline

    http://www.cnblogs.com/xiaohuochai/p/5277416.html

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

    盒子模型:盒子默认的宽度为容器的宽度,也可以自省设定宽度,高度根据内容适应,也可以自行设定高度.min-height设定最小高度 一个盒子包括外边距.边框.内边距和实际内容 Margin(外边距):清 ...

  3. CSS：CSS 轮廓（outline）

    ylbtech-CSS:CSS 轮廓(outline) 1.返回顶部 1. CSS 轮廓(outline) 轮廓(outline)是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用. ...

  4. HTML 学习笔记 CSS(轮廓)

    轮廓(outline)是绘制于元素周围的一条线 位于边框边缘的外围 可起到突出元素的作用 CSS outline属性规定元素轮廓的样式 颜色和宽度 话不多说 来几个例子 看一看 1:在元素周围画线 & ...

  5. 【转】精选30个优秀的CSS技术和实例

    今天,我为大家收集精选了30个使用纯CSS完成的强大实践的优秀CSS技术和实例,您将在这里发现很多与众不同的技术,比如:图片集.阴影效果.可扩展按钮.菜单等-这些实例都是使用纯CSS和HTML实现的. ...

  6. 精选30个优秀的CSS技术和实例

    精选30个优秀的CSS技术和实例   投递人 墙头草 发布于 2008-12-06 20:57 评论(97) 有17487人阅读 原文链接 [收藏] « » 今天,我为大家收集精选了30个使用纯CSS ...

  7. css技术和实例

    今天,我为大家收集精选了30个使用纯CSS完成的强大实践的优秀CSS技术和实例,您将在这里发现很多与众不同的技术,比如:图片集.阴影效果.可扩展按钮.菜单等-这些实例都是使用纯CSS和HTML实现的. ...

  8. CSS 分类 (Classification) 实例

    CSS 分类 (Classification) 实例CSS 分类属性 (Classification)CSS 分类属性允许你控制如何显示元素,设置图像显示于另一元素中的何处,相对于其正常位置来定位元素 ...

  9. CSS 尺寸 (Dimension) 实例

    CSS 尺寸 (Dimension) 实例CSS 尺寸属性CSS 尺寸属性允许你控制元素的高度和宽度.同样,还允许你增加行间距. 属性 描述height 设置元素的高度.line-height 设置行 ...

随机推荐

  1. css常用的特效代码

    一.网页变灰的代码:a) 网页变灰色<head>加到这里</head><style type="text/css">html {FILTER: ...

  2. 基于OpenSLL的RSA加密应用(非算法)

    基于OpenSLL的RSA加密应用(非算法) iOS开发中的小伙伴应该是经常用der和p12进行加密解密,而且在通常加密不止一种加密算法,还可以加点儿盐吧~本文章主要阐述的是在iOS中基于openSL ...

  3. 如何设计一个优秀的API（转载）

    最近在整理框架的一些 API,觉得很有必要总结一下 API 兼容性的设计.下图是我自己当下的一些总结,慢慢维护: 网上搜索了一下,一个多月前,“标点符”已经发布了下面这篇文章,觉得写得非常不错,转载于 ...

  4. [Asp.net 5] Options-配置文件之后的配置

    今天要讲的是OptionsModel解决方案,整个解决方案中也只有Microsoft.Framework.OptionsModel一个工程.按照表面文字OptionsModel应该翻译成选项模型,但是 ...

  5. lob结构

    lob是什么? 从网上查了好多资料没找到,最后还是同事给我找到了. lob他是这样解释的:LOB专门存储大型对象数据的,类型text.image这些数据类型的数据就是存储在LOB页面 LOB_DATA ...

  6. 异步编程系列第05章 Await究竟做了什么？

    p { display: block; margin: 3px 0 0 0; } --> 写在前面 在学异步,有位园友推荐了<async in C#5.0>,没找到中文版,恰巧也想提 ...

  7. Entity Framework 代码先行

    一.什么是Code First 为了支持以设计为中心的开发流程,EF还更多地支持以代码为中心 (code-centric) ,我们称为代码优先的开发,代码优先的开发支持更加优美的开发流程,它允许你在不 ...

  8. UDS(ISO14229-2006) 汉译(No.4 术语和缩写)

    A_PCI                    Application layer Protocol Control Information应用层协议控制消息. A_PDU              ...

  9. php实现设计模式之 职责链模式

    <?php /** * 职责链模式 * * 为解除请求的发送者和接收者之间的耦合,而使用多个对象都用机会处理这个请求,将这些对象连成一条链,并沿着这条链传递该请求,直到有一个对象处理它 * 抽象 ...

  10. 帆布指纹识别（canvas fingerprinting）

    广告联盟或许网站运营者都希望能够精准定位并标识每一个个体,通过对用户行为的分析(浏览了哪些页面?搜索了哪些关键字?对什么感兴趣?点了哪些按钮?用了哪些功能?看了哪些商品?把哪些放入了购物车等等),为用 ...