【简单了解css3轮廓outline】的更多相关文章

简单了解css3轮廓outline

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

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

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

简单了解css3样式表写法和优先级

css3和css有什么区别?首先css3是css(层叠样式表)技术的升级版本,而css是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言.然后是内容上css3主要包括盒子模型.列表模块.超链接方式.语言模块.背景和边框.文字特效.多栏布局等模块.而css不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化.最后在特点上css3新特征有很多,例如圆角效果.图形化边界.块阴影与文字阴影.使用RGBA实现透明效果.渐变…

【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以根元…

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

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

一个简单的CSS3+js 实现3D BOX

<!doctype html><html><head> <meta charset="UTF-8"> <title>Document</title> <style> html, body, div, span, h1, h2, h3, h4, h5, h6, p a, img, ol, ul, li { margin:0;padding:0;border:0;outline:0; } body { ma…

边框(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 Loading动画

最终效果如图一,gif图片稍微有点卡顿,事实上代码在浏览器里执行得很流畅.这里面用到的css3技术非常简单,分别是border-radius.伪元素.css3关键帧以及animation动画. 首先整理一下大概的思路:整个圆分为AB两部分,左右都是半圆,上面盖了一个背景色为白色的小圆,如右图,简单布局如下: <style> .loading{margin:100px auto; width: 8em; height: 8em; position: relative;} .loading .pr…

简单使用CSS3实现炫酷读者墙效果

读者墙,在很多网站上都有,没有遇到过的,可以参考度娘:读者墙http://www.baidu.com/s?wd=%B6%C1%D5%DF%C7%BD 使用基础的Html和CSS写出雏形 需要一提的是头像(img)的排版.给外面a标签padding-left:;,img自身float:left;margin-left:;,这种写法避免了不少因浮动产生的问题,且代码简明,推荐适当的使用此方法. 使用并解说所用CSS3 接下来给大家说说这个读者墙所应用到的css3属性,及其具体的使用方法,老鸟可以飞了…

css3中outline切换动画效果

今天刚看了篇文章<纯CSS实现的outline切换transition动画效果> 里面的效果研究了一下,下图为实现时的效果 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <style> .focus-tra…