CSS3笔记
为容器的四个内边距添加相同的数值(15px),但是容器内的文字让上下两边的内边距显得比左右两边更大一些。容器看起来并不协调。究其原因就是在水平方向上字体形状更加连贯,导致我们的眼睛认为垂直方向上的多余空间都是内边距。因此,我们在垂直方向上减少内边距,才能让四边的内边距看起来一致。
inherit 可以被应用到任何的 CSS 属性上,并且会根据父级元素的属性计算出恰当的值(如果是伪元素,那么就会根据当前元素属性来计算)。比如,让表单元素和页面其他元素具有相同的字体,无需一一指定,直接使用 inherit。
filter:progid:DXImageTransform.Microsoft.gradient(enabled='true',startColorstr='#CCFFFFFF', endColorstr='#99000000');
}
:root .class {
filter:none; /*处理IE9浏览器中的滤镜效果*/
background-color:rgba(0,0,0,0.6);
}
对于p:nth-child(2)选择器,意味着选择一个元素如果:
1、这是个段落元素
2、这是父标签的第二个子元素
对于:nth-of-type(2)选择器,意味着选择一个元素如果:
1、选择父标签的第二个段落子元素(限制条件少些)
参考博客:http://www.zhangxinxu.com/wordpress/2011/06/css3%E9%80%89%E6%8B%A9%E5%99%A8nth-child%E5%92%8Cnth-of-type%E4%B9%8B%E9%97%B4%E7%9A%84%E5%B7%AE%E5%BC%82/
利用CSS3选择器选择第7到14个元素:ul li:nth-child(n+7):nth-child(-n+14) {
background: lightpink;
}
这个功能在Safari中不起效。解决方案:只需将选择器中的顺序换一下,变成这样:ol li:nth-child(-n+14):nth-child(n+7)。Webkit不能识别这种写法,所以你最终还是可以让它在Safari中正常运行。
注意里面的反斜杠,它跟font和border-radius里简写方式使用的反斜杠的用法相似。反斜杠可以在支持这种写法的浏览器里在position后面接着写background-size。如果简写时缺少某一个属性值,则background失效。
PhotoShop阴影效果转换成css中box-shadow
混合模式:PhotoShop提供了多种混合模式,但是CSS3只支持正常模式(normal)。
颜色: 阴影颜色。对应于CSS3阴影中的color值。
不透明度(Opacity): 阴影的不透明度。对应于CSS3阴影的颜色rgba()中的a。
角度(Angle):阴影的角度。
距离(Distance):阴影的距离。根据阴影的角度和距离,可以计算出CSS3阴影中的h-shadow和v-shadow。
h-shadowt = Distance * cos(180 - Angle)
v-shadowt = Distance * sin(180 - Angle)
扩展(Spread):阴影的扩展大小。控制阴影实体颜色和虚化颜色的多少。
大小(Size):阴影的大小。
spread = Spread * Size
blur = Size - spread
box-shadow语法:
box-shadow: h-shadow v-shadow blur spread color inset;
text-shadow语法:
text-shadow: h-shadow v-shadow blur color;
text-shadow没有spread,所以不能完全实现。
<a href="javasript:" class="btn">我的按钮</a> .btn{
display: inline-block;
padding: 15px;
text-decoration: none;
font-size: 25px;
background-color: #b01c20;
color: #fff;
border: 1px solid #bfbfbf;
border-radius: 5px;
text-shadow: 0 1px #000;
box-shadow: 0px 0px 3px hsla(0,0%,26.6667%,0.8);
background: linear-gradient(90deg,#b01c20 0%,#f15c60 100%);
}
用CSS3动画实现省略号动画:
<div class="loading"></div> .loading:after {
overflow: hidden;
display: inline-block;
vertical-align: bottom;
animation: ellipsis 2s infinite;
content: "\2026"; /* ascii code for the ellipsis character */
}
@keyframes ellipsis {
from {
width: 2px;
}
to {
width: 15px;
}
}
CSS3笔记的更多相关文章
- css3笔记系列-3.css中的各种选择器详解,不看后悔系列
点击上方蓝色字体,关注我 最详细的css3选择器解析 选择器是什么? 比较官方的解释:在 CSS 中,选择器是一种模式,用于选择需要添加样式的元素. 最常见的 CSS 选择器是元素选择器.换句话说 ...
- 【css3笔记】---- 渐变的秘密
<CSS揭秘>这本书非常不错,充满了干货和惊喜.以下主要是关于使用渐变做出来的一些效果的笔记.请用最新的现代浏览器观看. 首先要回顾下一个css语句: linear-gradient([ ...
- CSS3 笔记四(Transforms/Transition/Animations)
CSS3 2D Transforms Methods translate() rotate() scale() skewX() skewY() matrix() 1> translate() T ...
- CSS3 笔记三(Shadow/Text/Web Fonts)
CSS3 Shadow Effects text-shadow box-shadow 1> text-shadow The text-shadow property adds shadow to ...
- CSS3 笔记二(Gradients)
CSS3 Gradients Two types of gradients: Linear Gradients (goes down/up/left/right/diagonally) Radial ...
- CSS3 笔记一(Rounded Corners/Border Images/Backgrounds)
CSS3 Rounded Corners The border-radius property is a shorthand property for setting the four border- ...
- CSS3笔记(一)
最开始的时候 CSS3产生的一个新属性是一个浏览器的私有的,然后W3C 可能会拿来采用做个标准,再没公布标准之前就只能用私有属性(加前缀)来表达各自厂商的实现,主要是CSS3刚出现那会儿,它暗示该CS ...
- CSS3笔记之第四天
CSS3 2D 转换 了解2D变换方法: translate() rotate() scale() skew() matrix() translate()方法,根据左(X轴)和顶部(Y轴)位置给定的参 ...
- CSS3笔记之第三天
CSS浮动 float:right 伪类: a:link {color:#FF0000;} /* 未访问链接*/ a:visited {color:#00FF00;} /* 已访问链接 * ...
随机推荐
- hdu 1861-游船出租
游船出租 Time Limit: 1 ...
- eclipse插入自定义注释(含当前系统时间)
/** * @author ${user} * @description * ${tags} * @CreateDate ${date} ${time} * @modifyUser * @modify ...
- START167 AND BOOT167
http://infocenter.arm.com/help/index.jsp?topic=/com.arm.doc.faqs/ka10535.html C166: START167 AND BOO ...
- U8记账凭证修改方法汇总
在输入记账凭证时,尽管账务系统提供了多种控制错误的措施,但错误凭证的出现是难免的,为此,系统必须能够提供对错误凭证修改的功能.目前,许多财 务软件(如:用友.安易.三门)都提供了“反审核.反记账.反结 ...
- Codeforces Round #310 (Div. 1) A. Case of Matryoshkas 水题
C. String Manipulation 1.0 Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/contes ...
- Html Agility Pack基础类介绍及运用
第一篇只对Html Agility Pack做了一个大概的介绍,在接下来的章节会比较深入的介绍Html Agility Pack. Html Agility Pack 源码中的类大概有28个左右,其实 ...
- Android Widget 小部件(三) 在Activity中加入Widget
package com.stone.ui; import static android.util.Log.d; import android.app.Activity; import android. ...
- SQL SERVER中查找某关键词位于哪些存储过程或函数
USE [MYDB] go SELECT * FROM INFORMATION_SCHEMA.ROUTINES WHERE routine_type='PROCEDURE' AND routine_d ...
- 0c-41-ARC下循环引用问题
1.ARC下循环引入问题 一个人拥有一只狗,一只狗拥有一个主人. 当增加d.owner = p;时形成循环引用. 解决方法:一端用strong,一端用weak. 2.ARC下@property参数 A ...
- 0c-39-ARC下单对象内存管理
1.ARC工作原理详述 ARC是Objective-C编译器的特性,而不是运行时特性或者垃圾回收机制,ARC所做的只不过是在代码编译时为你自动在合适的位置插入release或autorelease A ...