css3阴影 | 易学教程

CSS3字体发光效果

阅读更多关于 CSS3字体发光效果

博客页面左上角的“猿来是勇者”文字已制作发光效果，分享方法如下: text-shadow 该属性为文本添加阴影效果 text-shadow: h-shadow v-shadow blur color; h-shadow : 水平阴影的位置(阴影水平偏移量)，可为负值，必需 v-shadow : 垂直阴影的位置(阴影垂直偏移量)，可为负值，必需 blur : 阴影模糊的距离(默认为0)，可选 color : 阴影颜色(默认为当前字体颜色)，可选乍一看，text-shadow 属性仅仅是用来设置文本阴影的，似乎并不能实现字体发光效果。其实不然，这正是 text-shadow 属性的精妙之处。当阴影的水平偏移量和垂直偏移量都为0时，阴影就和文本重合了这时，如果增大阴影模糊的距离，就可以达到字体外发光的效果了。当然，为了使外发光更加酷炫，还需要使用到 text-shadow 的另一个特性: 同时设置多个阴影(使用逗号分隔设置多个阴影) 代码实例 HTML Code xinpureZhu CSS Code body { background: #000; } .container { width: 600px; margin: 100px auto 0; } p { font-family: 'Audiowide'; text-align: center; color:

CSS3文本效果

阅读更多关于 CSS3文本效果

text-shadow 属性有四个值水平阴影、垂直阴影、模糊距离、阴影颜色 div { text-shadow : 5px 5px 10px #ff0000 ; } text-overflow 属性规定当文本溢出包含元素时发生的事情 clip 修剪文本 ellipsis 显示省略符号来代表被修剪的文本 string 使用给定的字符串来代表被修剪的文本更多专业前端知识，请上【猿2048】www.mk2048.com 来源： https://blog.csdn.net/whiteGay/article/details/102754923

css3新增

阅读更多关于 css3新增

1.圆角边框 border-radius 　border-radius 属性用于设置元素的外边框圆角　语法：border-radius:length; 　　参数值可以是数值或者百分比的形式　　正方形，数值设置宽或高的一半，或者 50%；　　矩形，数值设置高度的一半 2.盒子阴影 box-shadow 　　box-shadow：水平阴影的位置垂直阴影的位置模糊距离阴影尺寸阴影颜色外部阴影　　　模糊距离：影子的虚实　　　阴影尺寸：影子大小　　注意：　　　1.默认值外阴影（outset），但是不可以写这个单词，否则导致阴影无效　　　2.盒子阴影不占用空间，不会影响其他盒子排列 3.文字阴影 text-shadow 　　box-shadow：水平阴影的位置垂直阴影的位置模糊距离阴影颜色；来源： https://www.cnblogs.com/qtbb/p/11729357.html

css3

阅读更多关于 css3

css3 1.圆角边框与阴影文本阴影：鼠标悬停动态效果：图片上停留出现说明文字文字排版分列：文字分为两列，类似报刊盒子：圆角边框，阴影，倾斜，旋转效果。浏览器前缀表:(w3school) 浏览器内核浏览器 css3前缀 Webkit Safari -webkit- Webkit Chrome -webkit- Gecko Firefox -moz- Presto Opera -o- Trident IE -ms- 1.1圆角边框border-radius属性： border-top-left-radius左上角的形状 border-top-right-radius 右上角的形状 border-bottom-left-radius 左下角的形状 border-bottom-right-radius 右下角的形状 border-radius：水平值垂直值 //方型，对角椭圆<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>D</title> <style type="text/css" media="screen"> div{ height: 100px; width: 150px; border:1px solid blue; border-top-left-radius: 40px 20px;

CSS3之box-shadow

阅读更多关于 CSS3之box-shadow

语法： box-shadow: h-shadow v-shadow [blur] [spread] [color] [inset]; 用于在块级元素(如div)上投射阴影。参数说明： 1、阴影的水平偏移量，正数表示阴影在框的右侧，负偏移量将阴影放在框的左侧。 2、阴影的垂直偏移，负数表示阴影在框的上方，正数表示阴影在框的下方。 3、模糊半径(可选)，如果将其设置为0，阴影将变得清晰，数字越大，模糊程度越大。 4、传播半径(可选)，正值增加阴影的大小，负值减小阴影的大小。默认值为0(阴影与模糊大小相同)。于长而直的阴影边缘，它会创建一个过渡颜色用于模糊以阴影边缘为中心、模糊半径为半径的局域，过渡颜色的范围在完整的阴影颜色到它最外面的终点的透明之间。 5、阴影颜色(可选)，默认颜色存在跨浏览器不兼容，目前chrome、firefox为黑色，safari为透明色。 6、设置为内阴影(可选)，没有设置则为外阴影。若设置，该关键词放置在语句开头或末尾均可。 .shadow { -moz-box-shadow: 3px 3px 5px 6px #ccc; -webkit-box-shadow: 3px 3px 5px 6px #ccc; box-shadow: 3px 3px 5px 6px #ccc; } 　　内阴影 .shadow { -moz-box-shadow: inset

css：css认知总结

阅读更多关于 css：css认知总结

什么是css？ css英文全称Cascading Style Sheets，中文全称层叠样式表，作用是编辑、排版、控制html的样式。选择器（普通选择器；伪类选择器；伪元素选择器）属性选择器： e[att^=’val’]{}：某属性开头包含某字符串 e[att$=’val’]{}：某属性结尾包含某字符串 e[att*=’val’]{}：某属性包含某字符串结构性伪类选择器 :root{}：根元素选择器，控制html（推荐使用） input:not([type=’submit’]){}：否定选择器，选择除此以外的其他元素 Div:empty{}：空元素选择器，选择没有任何内容的元素，包括空格 :target{} ul>li:first-child {color: red;} ：子元素选择器，不是后代选择器 ul>li:last-child {color: red;} ：子元素选择器，不是后代选择器 div > div:nth-child(2){}：选择一个或多个子元素（2,2n,odd,even） div > div:nth-last-child(2){}：同上，但是从最后一个子元素开始计算 div > div:nth-of-type(5){} ：指定某类子元素的某个或多个 div > div:nth-last-of-type(5){}：同上，但是从最后一个子元素开始计算 div

CSS盒子模型阴影和浮动

阅读更多关于 CSS盒子模型阴影和浮动

content宽度和高度使用宽度属性width和高度属性height可以对盒子的大小进行控制。 width和height的属性值可以为不同单位的数值或相对于父元素的百分比%，实际工作中最常用的是像素值。大多数浏览器，如Firefox、IE6及以上版本都采用了W3C规范，符合CSS规范的盒子模型的总宽度和总高度的计算原则是： /*外盒尺寸计算（元素空间尺寸）*/ Element空间高度 = content height + padding + border + margin Element 空间宽度 = content width + padding + border + margin /*内盒尺寸计算（元素实际大小）*/ Element Height = content height + padding + border （Height为内容高度） Element Width = content width + padding + border （Width为内容宽度） 1.宽高值用于块级元素，对行内无效 2.计算盒子模型总高度，还应考虑外边距塌陷问题 3.如果一个盒子没有给定宽度高度，padding不会影响盒子大小盒子模型布局稳定性什么用外边距，什么时候用内边距。他们可以混用，那个方便用哪个按照稳定性来分： width>padding>margin

box-shadow 模糊半径与扩展半径

阅读更多关于 box-shadow 模糊半径与扩展半径

关于box-shadow的基本用法参阅 CSS3 box-shadow 一章节。此属性用来设置元素的阴影效果，语法结构如下: box-shadow:h-shadow v-shadow blur spread color inset; 下面通过代码实例介绍一下blur（模糊半径）和spread（扩展半径）参数的作用。一.模糊半径: blur参数规定模糊半径；W3C文档并没有具体规定使用哪种方式实现模糊功能。 <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>蚂蚁部落</title> <style> .box{ margin: 40px 0; } .ant{ background:red; width: 100px; height: 100px; } .one{ box-shadow: 110px 0 0 green; } .two{ box-shadow: 110px 0 20px green; } .three{ box-shadow: 110px 0 40px green; } </style> </head> <body> <div class="box"> <div class="ant

css border 三角形阴影(不规则图形阴影) & 多重边框的制作

阅读更多关于 css border 三角形阴影(不规则图形阴影) & 多重边框的制作

前言：这是笔者学习之后自己的理解与整理。如果有错误或者疑问的地方，请大家指正，我会持续更新！ border 的组合写法　　border：border-width border-style border-color; border-width：边框宽度，不能为百分比，因为不会根据设备宽度改变；同理，outline | text-shadow | box-shadow 也不可以； border-style：边框样式，一般用 solid 多一点，dashed（虚线）、dotted（点状线）也有； border-color：边框颜色，默认颜色是元素的文本颜色，如果没有设置，那就从父元素继承文本颜色；　　边框可以根据方向单独设置，上下左右，border-top | border-bottom | border-left | border-right ; 　　所以属性也可以单独设置，border-top-width | border-top-style | border-top-color ; 　　单属性也可以有组合写法： border-width:上右下左；（顺时针方向） border-width:上左右下； border-width:上下左右； border-width:四个方向； border-style | border-color也可以这样设置；　

css中的边框样式

阅读更多关于 css中的边框样式

在盒子模型中，盒子的边框是其重要的样式，通过边框我们可以很方便地看出盒子的长宽以及大小。边框的特性可以通过边框线，边框的宽度及颜色来呈现。 1 ，边框线边框线指的是边框线条的样式，包括实线，虚线，点划线等。其具体的使用如下： border-style : none | hidden | dotted | dashed | solid | double | groove |ridge | inset | outset 例： div { width:300px; height:100px; border-style:solid; ｝在这里我们将一个长为 300px ，宽为 100px 的盒子设置了实线的边框，在默认的情况下边框也为实线。我们也可以为某一个盒子设置多种不同的边框。此时要注明所要设置的边框的位置。如： border-top-style 设置上边框线 border-bottom-style 设置下边框线 border-left-style 设置左边框线 border-right-style 设置右边框线 2 ，宽度设置边框的宽度可以使盒子的边框更加具有多样性，也方便了我们的观察。 border-width : medium | thin | thick | length 同边框线一样，要为一个盒子设置多个不同的边框宽度，要用到下面的语法： border-top

订阅 css3阴影