CSS 不规则的轮廓-outline

【CSS 不规则的轮廓-outline】的更多相关文章

CSS 不规则的轮廓-outline

大家好,我是半夏,一个刚刚开始写文的沙雕程序员.如果喜欢我的文章,可以关注点赞加我微信:frontendpicker,一起学习交流前端,成为更优秀的工程师-关注公众号:搞前端的半夏,了解更多前端知识! 点我探索新世界! 原文链接 ==>http://sylblog.xin/archives/39 前言日常开发中,我们经常使用border来给元素增加一些美感,但是由于盒子模型的存在,border有时候会影响我们的判断,所以今天我们来介绍另一个属性来为元素增加一些美感. outline out…

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

盒子模型:盒子默认的宽度为容器的宽度,也可以自省设定宽度,高度根据内容适应,也可以自行设定高度.min-height设定最小高度一个盒子包括外边距.边框.内边距和实际内容 Margin(外边距):清除边框外的区域,外边距是透明的. Border(边框):围绕在内边距和外边距的边框. Padding(内边距):清除内容周围的区域,内边距是透明的. Content(内容):盒子的内容,显示文本和图像. 例如下面一个例子 <!DOCTYPE html> <html> ······ &l…

CSS轮廓outline

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

边框(Border) 和轮廓(Outline) 属性

border 复合属性.设置对象边框的特性. 标签定义及使用说明如果上述值缺少一个没有关系,例如border:#FF0000;是允许的. 默认值: not specified 继承: no JavaScript 语法: object object.style.border="3px solid blue" 属性值 border-width 指定边框的宽度 border-style 指定边框的样式 border-color 指定边框的颜色 inherit 指定应该从父元素继承borde…

简单了解css3轮廓outline

outline属性是用来设置一个或多个单独的轮廓属性的简写属性 , 例如 . 轮廓有下面几个属性: { outline-style: solid; outline-width: 10px; outline-color: red; } 他们有一种简写形式: { outline: 10px solid red; } 轮廓的特点: 轮廓不占据空间,它们被描绘于内容之上. 可以做到下图的效果: 当然我们可以做更好玩的东西,比如一个"+"号: 具体css如下: div { margin: 100…

HTML学习笔记 CSS表格及轮廓案例第八节（原创）参考使用表

#tb, tb1, tr, th, td { border: 5px solid blue; /*加边框*/ padding: 5px; /*内边距*/ } #tb1 { border-collapse: collapse; /*合并边框*/ width: 500px; height: 500px; text-align: center; background-color: aqua; } <!DOCTYPE html> <html lang="en"> <…

【CSS3】透明度opacity与rgba()区别、光标cursor、display、轮廓outline与margin及border区别、em和rem区别

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> div{ width: 300px; height: 200px;/*浏览器默认字体大小16px*/ margin:1em;/*em以父元素字体为基准*/ padding: 1rem;/*rem以根元…

CSS 不规则图形绘制

基础技能1 - 神奇的border 我们先来画一个长方形: .Rectangle { height: 100px; width: 200px; background: darkgray; border-width: 50px; border-style: solid; border-top-color: cyan; border-bottom-color: blue; border-left-color: orange; border-right-color: green; } 有没有发现什么?…

CSS中border和outline的区别

border: border-width:1px; border-style:solid; border-color:#ccc; 可以简写为:border:1ox solid #ccc; outline: outline-width:1px; outline-style:solid; outline-color:#ccc; 可以简写为:outline:1ox solid #ccc; 2者的用法相似,但是border是会占据盒子模型的大小,而outline是一个轮廓,不会占据盒子模型的大小.…

CSS属性: 阴影轮廓渐变

注: 本文摘自宁静致远 - CSDN / 但愿人长久千里共婵娟 - CSDN 阴影使用box-shadow属性可以为元素添加阴影效果, 比如 box-shadow: h-shadow v-shadow blur spread color inset; 关键字是否必须作用值 h-shadow 是阴影的水平偏移量长度值,正值代表阴影向右偏移,负值代表阴影向左偏移 v-shadow 是阴影的垂直偏移量长度值,正值代表阴影向下偏移,负值代表阴影向上偏移 blur 否模糊值长度值,…

轮廓Outline|表格Table实例

css奇技淫巧—box-shadow与outline绘制多重边框效果

css语法: box-shadow: h-shadow v-shadow blur spread color inset; 注释:box-shadow 向框添加一个或多个阴影.该属性是由逗号分隔的阴影列表,每个阴影由 2-4 个长度值.可选的颜色值以及可选的 inset 关键词来规定.省略长度的值是 0. 值描述测试 h-shadow 必需.水平阴影的位置.允许负值. 测试 v-shadow 必需.垂直阴影的位置.允许负值. 测试 blur 可选.模糊距离. 测试 spread 可选.阴影的…

CSS3——盒子模型 border(边框) 轮廓(outline)属性 margin外边距 padding填充

盒子模型包括——边距,边框,填充,和实际内容 Margin(外边距) - 清除边框外的区域,外边距是透明的. Border(边框) - 围绕在内边距和内容外的边框. Padding(内边距) - 清除内容周围的区域,内边距是透明的. Content(内容) - 盒子的内容,显示文本和图像. 当指定一个CSS元素的宽度和高度属性时,只是设置内容区域的宽度和高度.要知道,完全大小的元素,还必须添加填充,边框和边距下面的例子中的元素的总宽度为300px: div { background-col…

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…

HTML 学习笔记 CSS(轮廓)

轮廓(outline)是绘制于元素周围的一条线位于边框边缘的外围可起到突出元素的作用 CSS outline属性规定元素轮廓的样式颜色和宽度话不多说来几个例子看一看 1:在元素周围画线 <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> p { border: red solid t…

CSS基础（背景、文本、列表、表格、轮廓）

CSS 背景属性属性描述 background 简写属性,作用是将背景属性设置在一个声明中. background-attachment 背景图像是否固定或者随着页面的其余部分滚动. background-color 设置元素的背景颜色. background-image 把图像设置为背景. background-position 设置背景图像的起始位置. background-repeat 设置背景图像是否及如何重复. CSS 文本属性属性描述 color 设置文本颜色 directi…

CSS样式学习-3、轮廓、伪类/元素、display-flex布局

一.轮廓 outline绘制于元素周围的一条线,位于边框边缘外围. 属性规定元素轮廓的样式.颜色.宽度. outline-width轮廓宽度,属性:thin细轮廓.medium中等(默认值).thick粗轮廓.inherit规定从父级继承.length可以规定大小px outline-style轮廓样式,属性:none无(默认值).dotted点状.dashed虚线.solid实线.double双线.groove凹槽3D.ridge凸槽3D.inset凹边3D.outset凸边3D(3D效果取决…

CSS控制边界、边框与外轮廓

一.CSS控制边界 1.内边距 padding(内边距也叫内填充) padding-bottom 长度/百分比元件下端边线的空隙 padding-left 长度/百分比元件左端边线的空隙 padding-right 长度/百分比元件右端边线的空隙 padding-top 长度/百分比元件上端边线的空隙简易写法: padding:10px 一个值表示同时控制四个方向 padding:2px 4px 两个值表示第一个值控制上下第二个值控制左右 padding:2px 6px 10px 三…

Unity之2D Sprite Outline外轮廓效果

操作系统:Windows8.1 显卡:Nivida GTX965M 开发工具:Unity5.3.8f1 Unity提供了2D Object Sprite对象,但是没有提供外轮廓Outline效果的支持,本次将会使用扩展版本的默认sprite着色器以及一个简单的组件来添加sprite的轮廓.这可以用于突出鼠标上的精灵,突出显示环境中的元素,或仅仅使精灵从周围环境中脱颖而出. 首先,在您的项目中创建一个名为Sprite-Outline的新着色器. 这个着色器提供了默认sprite着色器的所有功能,并…

[ShaderStaff] Sprite Outline外轮廓效果

操作系统:Windows8.1 显卡:Nivida GTX965M 开发工具:Unity5.3.8f1 Unity提供了2D Object Sprite对象,但是没有提供外轮廓Outline效果的支持,本次将会使用扩展版本的默认sprite着色器以及一个简单的组件来添加sprite的轮廓.这可以用于突出鼠标上的精灵,突出显示环境中的元素,或仅仅使精灵从周围环境中脱颖而出. 首先,在您的项目中创建一个名为Sprite-Outline的新着色器. 这个着色器提供了默认sprite着色器的所有功能,并…

如何去除表单元素获得焦点时的外边框:outline (轮廓)

我们在做制作表单页面时,经常会需要消除表单元素带来的边框,这时候我们需要用到两个属性: 1.表单元素未激活状态下的边框,不实现边框: border:none; 2.表单元素获得焦点时的轮廓,隐藏轮廓: outline:medium; 具体代码如下: .form_row input[type=text], .form_row input[type=password] { width: 520px; height: 40px; margin: 0px auto; margin-left: 5px;…

CSS用户界面样式之cursor/outline/resize

1. 鼠标样式cursor 检测鼠标指针在对象上移动的鼠标指针采用何种系统预定于的光标形状常用属性: default 小白 hands小手 /pointer move移动 text文本 2. 轮廓 outline 绘制于元素周围的一条线,位于边框边缘外围,可起到突出元素的作用属性: outline-color outline-style outline-width 一般不会去设置外边线直接取消 outline:0; 或outline: none; 3. 防止拖拽文本域resize text…

谈谈一些有趣的CSS题目（一）-- 左边竖条的实现方法

开本系列,讨论一些有趣的 CSS 题目,抛开实用性而言,一些题目为了拓宽一下解决问题的思路,此外,涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题中有你感觉到生僻的 CSS 属性,赶紧去补习一下吧. 不断更新,不断更新,不断更新,重要的事情说三遍. 所有题目汇总在我的 Github . 题目1.下面这个图形,只使用一个标签,可以有多少种实现方式: 假设我们的单标签是一个 div: <div></div> 定义如下通用CSS: div{ p…

html+css笔记

文档结构 1.html文档结构 ①文档类型声明严格型(标准模式): <!DOCTYpE HTML> HTML5 XHTML 1.0:<!DOCTYpE html pUbLC"-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> Strict DTD 准标准模式:transitional过渡型 frameset框架…

CSS3外轮廓属性

外轮廓outline在页面中呈现的效果和边框border呈现的效果极其相似,但和元素边框border完全不同,外轮廓线不占用网页布局空间,不一定是矩形,外轮廓是属于一种动态样式,只有元素获取到焦点或者被激活时呈现. outline属性早在CSS2中就出现了,主要是用来在元素周围绘制一条轮廓线,可以起到突出元素的作用.但是并未得到各主流浏览器的广泛支持,在CSS3中对outline作了一定的扩展,在以前的基础上增加新特性.outline属性的基本语法如下: outline: ［outline-co…

几个简单的css样式使用说明

假设我们的单标签是一个 div: 定义如下通用CSS: div{ position:relative; width:200px; height:60px; background:#ddd; } 法一:border 这个应该是最最最容易想到的了 div{ border-left:5px solid deeppink; } 法二:使用伪元素一个标签,算上 before 与 after 伪元素,其实算是有三个标签,这也是很多单标签作图的基础,本题中,使用伪元素可以轻易完成. div::after{…

CSS学习目录

前面的话 CSS是前端工程师的基本功,但好多执迷于学习javascript的人的基本功并不扎实.可能一些人从w3school网站匆匆过了一遍,只是对CSS常用概念有一些表面上的理解,就一头扎进javascript的深坑里跳不出来.实际上,javascript中比较复杂的逻辑很有可能使用CSS几行样式就能解决问题,而且性能还好. CSS之所以能成为一门优雅的语言,以及有其对应的重构工程师的岗位,是因为这本语言本身就有很强的存在价值,且真正要理解它并不容易.从CSS禅意花园开始,写CSS成为一种艺术…

CSS基础知识学习笔记

1.css基本样式讲解 1.1 css背景background-attachment:背景图像是否固定或者随着页面的其余部分滚动background-color:设置元素的背景颜色background-image:把图片设置为背景background-position:设置背景图片的起始位置background-repeat:设置背景图片是否及如何重复background-size:规定背景图片的尺寸background-orgin:规定图片的定位区域background-clip:规定背景的绘…

静态Web开发 CSS

二章 CSS 1节CSS介绍 CSS(Cascading Style Sheets) //cascade级联,串联CSS由两个部分组成:选择器,以及一条或多条声明selector{declaration1;declaration2;...} <style>h1{font-size:16px;color:red;}</style><h1>一级标签</h1> 2节CSS定义三种样式 1 内联式<h1 style="font-size:16px;c…

一览css布局标准

回顾历史,CSS1于1996.12.17发正式版,它是为辅助HTML的展现效果而生的.1998.5.12,CSS2发正式版.随后发修订版CSS2.1,纠正了CSS2中的一些错误.注意从CSS2起,CSS的作用就不是辅助展现了,变为全全负责展现.(注:当年CSS2的勘误表有兴趣可以看看) CSS2.1明确了2个模型,一个是众所周知的盒模型(Box model),CSS1没有盒模型的概念,盒模型的前身在CSS1里叫做面向盒的格式化模型.元素抽象为盒,以盒为对象设计思路清晰多了.CSS3的盒模型丰富了…