css3学习笔记(一)
来源:互联网 发布:mac 提醒事项 红点 编辑:程序博客网 时间:2024/06/06 17:06
CSS3学习笔记
一,兼容性
在编写CSS3样式时,不同的浏览器可能需要不同的前缀。它表示该CSS属性或规则尚未成为W3C标准的一部分,是浏览器的私有属性,虽然目前较新版本的浏览器都是不需要前缀的,但为了更好的向前兼容前缀还是少不了的。
前缀 浏览器 -webkitchrome&safari-mozfirefox-msIE-oopera
二,边框
1,圆角效果 border-raidus
border-radius:10px; /* 所有角都使用半径为10px的圆角 */ border-raidus:2px 3px 4px 5px; /*四个半径值分别是左上,右上,右下,坐下,顺时针*/实心圆方法:
border-raidus:10px;/*元素宽高均为10px*/
2,阴影 box-shadow
box-shadow:4px 2px 6px #333333;
4px:x轴偏移量 必须有,水平方向,允许负值
2px:y轴偏移量 必须有,垂直方向,允许负值
6px:[阴影模糊半径] 可选,模糊距离,值越大越模糊,>=0
未写:[阴影扩展半径] 可选,阴影的尺寸,值可正负
#333333:[阴影颜色] 可选,缺省为黑
未写:[投影方式] 可选,inset为内阴影,缺省为外阴影
多个阴影用逗号隔开。
三,颜色
1,rgba:
color:rgba(r,g,b,a)/*a为透明度,取值0~1*/
2,颜色渐变:
background:linear-gradient(to bottom ,#fff,#999);
linear-gradient:渐变类型
to bottom:渐变方向,还可以为:to top,toleft,toright,to top left,to top right
#fff:起始颜色
#999:终止颜色
颜色值可以放多个,在起始和终止之间
四,文字、文本
1,实现文本溢出时用(......)表示:
text-overflow:ellipsis;/*溢出时的表示方式,此处为用省略号表示,还可以为clip(剪切)*/overflow:hidden;/*溢出内容隐藏*/white-space:nowrap;/*强制文本在一行内显示*/
2,文本阴影:text-shadow:X-offest Y-offset blur color;
X-offest :水平方向,正右负左
Y-offset :垂直方向,正下负上
blur :模糊值,>=0,
color :阴影颜色,可使用rgba
3,引入本地字体:@font-face
@font-face { font-family : 字体名称; src : url(字体文件在服务器上的相对或绝对路径);}
0 0
- CSS3学习笔记(一)
- css3学习笔记(一)
- css3学习笔记(一)
- Css3学习笔记(一):选择器篇
- HTML5+CSS3学习笔记(一) 概述
- HTML5与CSS3学习笔记(一)
- css3动画学习笔记(一)
- CSS3学习笔记(一)--2015-12-3
- css3学习笔记(一):伸缩布局盒模型flexbox
- HTML5与CSS3学习笔记:导航栏(一)
- CSS3属性笔记(一)
- 【读书笔记】CSS3学习(一)
- css3学习笔记(二)
- 《CSS3实战》笔记--渐变设计(一)
- 《CSS3实战》笔记--选择器(一)
- [持续更新]CSS3学习笔记(一)伪类选择器&自定义字体&背景图片
- HTML5 CSS3学习笔记(一)_HTML5中的标签、属性变化
- CSS3-学习记录一
- Java通过JDBC访问MySQL数据库实例
- Eclipse调试技巧
- CoreData 实例 --- 通讯录
- HDU 4160 Dolls 最小路径覆盖
- Android---46---电话管理器 TelephonyManager
- css3学习笔记(一)
- Java Native Interface (JNI)
- sql 模糊查询like 如何处理 NULL
- Android 仿 iphone 自定义滚动选择器
- 哈理工 oj 1161 Leyni
- mysql中查询第几行到第几行的记录
- <leetcode>Add Two Numbers
- EditPlus 快速编译运行,激活
- Android开发 解决RecyclerView in SwipeRefreshLayout触发下拉刷新的bug