W3School-CSS 轮廓（Outline)实例
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)实例的更多相关文章
- CSS轮廓outline
http://www.cnblogs.com/xiaohuochai/p/5277416.html
- css盒子模型、边框border、外边距margin、填充padding、轮廓outline
盒子模型:盒子默认的宽度为容器的宽度,也可以自省设定宽度,高度根据内容适应,也可以自行设定高度.min-height设定最小高度 一个盒子包括外边距.边框.内边距和实际内容 Margin(外边距):清 ...
- CSS：CSS 轮廓（outline）
ylbtech-CSS:CSS 轮廓(outline) 1.返回顶部 1. CSS 轮廓(outline) 轮廓(outline)是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用. ...
- HTML 学习笔记 CSS(轮廓)
轮廓(outline)是绘制于元素周围的一条线 位于边框边缘的外围 可起到突出元素的作用 CSS outline属性规定元素轮廓的样式 颜色和宽度 话不多说 来几个例子 看一看 1:在元素周围画线 & ...
- 【转】精选30个优秀的CSS技术和实例
今天,我为大家收集精选了30个使用纯CSS完成的强大实践的优秀CSS技术和实例,您将在这里发现很多与众不同的技术,比如:图片集.阴影效果.可扩展按钮.菜单等-这些实例都是使用纯CSS和HTML实现的. ...
- 精选30个优秀的CSS技术和实例
精选30个优秀的CSS技术和实例 投递人 墙头草 发布于 2008-12-06 20:57 评论(97) 有17487人阅读 原文链接 [收藏] « » 今天,我为大家收集精选了30个使用纯CSS ...
- css技术和实例
今天,我为大家收集精选了30个使用纯CSS完成的强大实践的优秀CSS技术和实例,您将在这里发现很多与众不同的技术,比如:图片集.阴影效果.可扩展按钮.菜单等-这些实例都是使用纯CSS和HTML实现的. ...
- CSS 分类 (Classification) 实例
CSS 分类 (Classification) 实例CSS 分类属性 (Classification)CSS 分类属性允许你控制如何显示元素,设置图像显示于另一元素中的何处,相对于其正常位置来定位元素 ...
- CSS 尺寸 (Dimension) 实例
CSS 尺寸 (Dimension) 实例CSS 尺寸属性CSS 尺寸属性允许你控制元素的高度和宽度.同样,还允许你增加行间距. 属性 描述height 设置元素的高度.line-height 设置行 ...
随机推荐
- 软件工程-构建之法 理解C#一小段程序
一.前言 老师给出的要求: 阅读下面程序,请回答如下问题: 问题1:这个程序要找的是符合什么条件的数? 问题2:这样的数存在么?符合这一条件的最小的数是什么? 问题3:在电脑上运行这一程序,你估计多长 ...
- LeetCode刷题系列
LeetCode 我们工作面试和提高自身数据结构和算法能力的时候往往需要刷刷题,我选择LeetCode是通过一个留学论坛了解的.专业,覆盖语种全面. 提前说说刷题的心得: 尽量手写代码,少使用IDE的 ...
- shell调用函数返回值深入分析
编写shell脚本过程中,我们经常会自定义一些函数,并根据函数的返回值不同来执行相应的流程,那么我们如何来获取函数的返回值呢? 首先shell中调用函数有两种方式: 第一种:value=`functi ...
- EF中的开放式并发（EF基础系列--28）
好久没更新EF这个系列了,现在又重新开始. 这次学习,开放式并发.首先拿出数据库脚本: 说明一下,这个数据库脚本是之前的章节中稍作修改的: USE [SchoolDB] GO /****** Obje ...
- 【C#公共帮助类】分页逻辑处理类
分页逻辑处理类 PageCollection.cs using System; using System.Collections.Generic; using System.Linq; using S ...
- asp.net 301重定向代码
/// <summary> ///重定向代码 /// </summary> /// <param name="sender"></para ...
- Thinking in Java——笔记(20)
Annotations They provide information that you need to fully describe your program, but that cannot b ...
- fastq-dump 报错 解决方案
命令行: ~/tools/sratoolkit/sratoolkit.2.3.2-5-centos_linux64/bin/fastq-dump --split-spot --gzip rhesus_ ...
- Lind.DDD.Manager里菜单权限的设计
回到目录 对于一个后台管理系统来说,你的权限设计与安全是重中之重,当你为一个权限分配一些菜单后,当这个权限的用户没有菜单权限时,这个菜单的URL是不可以被用户访问的,而在之前的设计中,没有考虑到这点, ...
- 怎么在MVC中使用自定义Membership
首先我们来看看微软自带的membership: 我们打开系统下aspnet_regsql.exe 地址一般位于: C:\WINDOWS\Microsoft.NET\Framework\v2.0.507 ...