CSS3主要的几个样式笔记】的更多相关文章

1.边框:border-color:    设置对象边框的颜色.     使用CSS3的border-radius属性,如果你设置了border的宽度是X px,那么你就可以在这个border上使用X种颜色,每种颜色显示1px的宽度.如果说你的border的宽度是10个像素,但是只声明了5或6种颜色,那么最后一个颜色将被添加到剩下的宽度. border-radius :设置边框圆角    第一个值是水平半径.     如果第二个值省略,则它等于第一个值,这时这个角就是一个四分之一圆角.     …
现在我打开支持前缀-webkit-的浏览器,也就是说只要支持前缀为-webkit-的浏览器才有效果 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css3伪选择器改变滚动条样式</title> <style> .thumb{ width:300px; height:600px; overfl…
分享一款纯CSS3实现漂亮的价格表样式代码是一款常见的主机商发布产品价格信息页.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div id="main"> <p style="text-align: center; padding: 30px; font-size: 16px"> <a href="index.html">DEMO 1</a>    <a href=&q…
css3-2   CSS3选择器和文本字体样式 一.总结 一句话总结:是要记下来的,记下来可以省很多事. 1.css的基本选择器中的:first-letter和:first-line是什么意思? :first-letter选择第一个单词,:first-line选择第一行 2.css的伪类选择器有哪三种,分别是什么意思? 伪类选择器::hover:focus::selection   所选的东西,比如文字 3.css字体设置4剑客是哪四个? 1.font-family 字体类型2.font-siz…
CSS3  更改字体被选中样式…
常见的CSS3选择器包含:常用基本.属性.伪类.层级(组合)选择器,具体使用情况建议先阅读css选择器四大类:基本.组合.属性.伪类对于选择器的使用有一个基本了解,选择器的作用在于通过它找到元素,并且给它添加属性样式. 常用的选择器有:标签.id.类.关联(通过父集找到子集)组合选择器,注意html页面中id是唯一的:基本选择器有(/*代表注释*/),/*:first-child第一个元素*/,/*:last-child最后一个元素*/,/*:nth-child(n)第几个元素*/,/*::fi…
前面我们一起探讨了一下CSS3 Gradient(css3 渐变),今天我们一起来探讨一下CSS3中的RGBA.RGB对于大家来说一点不陌生,他就是红色R+绿色G+蓝色B,那现在我们所说的RGBA又是什么呢?说得简单一点就是在RGB的基础上加进了一个通道Alpha.从而形成了我们今天需要讨论的RGBA.如果需要更详细的解说,大家就跟着我一起往下看吧. 语法: R:红色值.正整数 | 百分数 G:绿色值.正整数 | 百分数 B:蓝色值.正整数| 百分数 A:透明度.取值0~1之间 取值: <len…
盒的基本类型 在css中,使用display属性来定义盒的类型,总体上来说,css中的盒分为block类型与inline类型 inline-block类型 inline-block类型是在css2.1中追加的一个盒类型,属于block类型的一种,但是显示时它具有inline类型盒的特点,例子: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">…
text-overflow属性 当通过把overflow属性的属性值设定为"hidden"的方法,将盒中容纳不下的内容隐藏起来时,如果使用text-overflow属性,可以在盒的末尾显示一个代表省略号"-".但是,text-overflow属性只在当盒中的内容在水平方向上超出盒的容纳范围时有效.例子如下: <!DOCTYPE html> <html lang="en"> <head> <meta cha…
使用盒布局 在CSS3中,通过box属性来使用盒布局,例子如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>使用float属性进行布局的示例</title> <style> #container{ display: -moz-box; display: -webkit-box; } #l…