CSS Outline(轮廓)
CSS 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 |
2 |
三、轮廓(outline)实例
(1)示例1:在元素周围画一条线
p
{
border:1px solid red;
outline:green dotted thick;
}
效果:
(2)示例2:设置轮廓的样式
p {border:1px solid red;}
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;} /*外凸轮廓*/
效果:
(3)示例3:设置轮廓的颜色
p
{
border:1px solid red;
outline-style:dotted;
outline-color:#00ff00;
}
效果:
(4)示例4:设置轮廓的宽度
p.one
{
border:1px solid red;
outline-style:solid;
outline-width:thin;
}
p.two
{
border:1px solid red;
outline-style:dotted;
outline-width:3px;
}
效果:
CSS Outline(轮廓)的更多相关文章
- css -- outline轮廓
outline:#00ff00 solid thick; 边框参数: 样式: none:默认,无轮廓 dotted:点状轮廓 dashed:虚线轮廓 solid:实现轮廓 double:双线轮廓,宽度 ...
- CSS3 border-radius 属性和CSS outline 属性
CSS3 border-radius 属性 border-radius 属性是一个简写属性,用于设置四个 border-*-radius 属性. 提示:该属性允许为元素添加圆角边框! 注释:按此顺序设 ...
- (转)【Unity3d】Glow + Outline 轮廓描边
转:http://www.cnblogs.com/dosomething/archive/2012/08/04/2622488.html [Unity3d]Glow + Outline 轮廓描边 轮廓 ...
- css:outline
<!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> ...
- 如何去除表单元素获得焦点时的外边框:outline (轮廓)
我们在做制作表单页面时,经常会需要消除表单元素带来的边框,这时候我们需要用到两个属性: 1.表单元素未激活状态下的边框,不实现边框: border:none; 2.表单元素获得焦点时的轮廓,隐藏轮廓: ...
- css outline实践研究
outline具有和border很相似的属性,但多少又有些区别,就是因为这些区别才让它闪闪发光,先目睹一下. <style> div{ width:100px; height:100px; ...
- css outline属性
outline属性在一个html element的周围画出一条线来,位于边框的外围,起到突出元素的作用.轮廓线不占据任何布局空间,也不一定非要是矩形. p { outline:#00FF00 dott ...
- CSS:CSS 轮廓(outline)
ylbtech-CSS:CSS 轮廓(outline) 1.返回顶部 1. CSS 轮廓(outline) 轮廓(outline)是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用. ...
- HTML 学习笔记 CSS(轮廓)
轮廓(outline)是绘制于元素周围的一条线 位于边框边缘的外围 可起到突出元素的作用 CSS outline属性规定元素轮廓的样式 颜色和宽度 话不多说 来几个例子 看一看 1:在元素周围画线 & ...
随机推荐
- 在input文本框中存入对象格式的数据
<input id="teaching" type="hidden" name="teachingProgram" /> JQ: ...
- PL/SQL Developer使用技巧、快捷键(转载)
1.类SQL PLUS窗口:File->New->Command Window,这个类似于oracle的客户端工具sql plus,但比它好用多了. 2.设置关键字自动大写:Tools-& ...
- 区分兼容IE6/IE7/IE8/IE9/FF的CSS HACK写法
HACK原理:不同浏览器对各中字符的识别不同 在 CSS中常用特殊字符识别表: (1)*: IE6+IE7都能识别*,而标准浏览器FF+IE8是不能识别*的; (2)!important: 除IE6 ...
- 160310、oracle数据库的读写分离
PS:使用AbstractRoutingDataSource路由数据源实现动态数据库的调用 1. 连接哪个数据源的环境变量 package com.hysoft.common; public ...
- SharePoint PerformancePoint开发实例
前言 由于工作的原因,有一段时间没有发新的随笔了,最近使用了SharePoint PerformancePoint做了一些报表,与大家分享经验. 本文完全原创,转载请说明出处,希望对大家有用. 阅读目 ...
- vscode编辑器配置C语言编译运行环境
1.安装C/C++插件 2.安装编译环境,这里选择MinGW(http://mingw.org/ ) 选择一个安装目录,如:E:\workspace\MinGW mingw32-gcc开头的(包括了m ...
- Restful and 前后端分离---AutoTest newman--postman
http://www.cnblogs.com/zuoshaowei/p/6192863.html https://www.getpostman.com/docs/newman_intro swagge ...
- nodejs(三)上之express
express 简介 Express 是一个简洁而灵活的 node.js Web应用框架, 提供了一系列强大特性帮助你创建各种 Web 应用,和丰富的 HTTP 工具. 使用 Express 可以快速 ...
- python基础-第四篇-4.2文件操作
基本打开模式 文件操作的流程:打开文件,操作文件,关闭文件 打开文件方法:open(文件名,模式,编码) file = open(‘文件名’) 模式在不给值的情况下,默认为只读,而且如果是非当前的目录 ...
- java获取src下文件
方式一: InputStream in = Test.class .getResourceAsStream("/env.properties"); URL url = Test.c ...