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. Web接口测试工具---Poster与Postman

    工作当中有不少时间在编写和维护接口自动化测试用例.打算先整理一些接口相关工具的使用. 简单对接Web口测试的相关工具/技术做个划分. HTTP/SOAP协议接口的功能测试: 1.浏览器URL(GET请 ...

  2. java多线程--信号量Semaphore的使用

    Semaphore可以控制某个共享资源可被同时访问的次数,即可以维护当前访问某一共享资源的线程个数,并提供了同步机制.例如控制某一个文件允许的并发访问的数量. 例如网吧里有100台机器,那么最多只能提 ...

  3. 浅谈C#中一种类插件系统编写的简单方法（插件间、插件宿主间本身不需要通信）

    文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/. 1.背景 三年多前还在上研时,用C#+反射机制写过插件系统,后来又用M ...

  4. Node.js、express、mongodb 实现分页查询、条件搜索

    前言 在上一篇Node.js.express.mongodb 入门(基于easyui datagrid增删改查) 的基础上实现了分页查询.带条件搜索. 实现效果 1.列表第一页. 2.列表第二页 3. ...

  5. 5.Inheritance Strategy（继承策略）【EFcode-first系列】

    我们已经在code-first 约定一文中,已经知道了Code-First为每一个具体的类,创建数据表. 但是你可以自己利用继承设计领域类,面向对象的技术包含“has a”和“is a”的关系即,有什 ...

  6. 写个C#命令行参数解析的小工具

    最近测试工作做的比较多因此时常要创建一些控制台类型的应用程序.因为程序有不同的参数开关,需要在程序启动的时候通过命令行来给程序传递各种开关和参数.直接操作args有些不方便,所以就写了个解析参数的小工 ...

  7. 《c# 从入门经典》 (第6版) - c# 简介

    1,.NET Framework:是开发平台,包含两大部分: ①庞大的代码库(类库),可以在客户语言(C#,VB)中来使用这些代码 ②Common Language Runtime,负责管理应用程序的 ...

  8. csharp: ODP.NET,System.Data.OracleClient(.net 4.0) and System.Data.OleDb读取Oracle g 11.2.0的区别

    ODP.NET: 引用: using Oracle.DataAccess; //Oracle g 11.2.0 using Oracle.DataAccess.Client; using Oracle ...

  9. PHP资源网站收藏

    PHP之道 http://laravel-china.github.io/php-the-right-way/#use_the_current_stable_version http://www.ph ...

  10. tomcat之一：指定tomcat运行时JDK版本

    tomcat作为日常开发的web应用服务器,给开发测试带来了很多便利,tomcat的运行依赖JDK的支持,在安装JDK时经常会配置环境变量:JAVA_HOME.CLASSPAT,且需要添加path变量 ...