CSS3常用

CSS3：
1.文字阴影效果text-shadow:red 10px 10px 1px;
2.背景颜色渐变background:linear-gradient(to top,green,red,pink)
3.圆角效果:border-radius可以用来画圆，半圆
4.盒子阴影box-shadow: inset 20px 10px 100px green;
CSS常用点：
1.行高的设置会让文字自动居中（垂直方向）
2.一个div的margin的设置会让这个盒子自动居中（水平）
3.margin和padding的距离设置上右下左
4.盒子本身占据的地盘是内外+边框+内容
但是黑子的width属性只包含内+边框+内容
5.浮动：
浮动的元素高于文档流，不和标准文档流当中的元素一块排版
--如果浮动元素的哥哥是浮动元素，飘到它后面去
如果浮动元素的哥哥是标准文档流，那么这个浮动元素就不飘不上
--普通元素视角：哥哥是浮动元素，在排版的时候无视哥哥占的位置（叠加）
哥哥不是浮动元素，跟着排在下一行

伪类---:active样式添加到被激活的
:focus添加到被选中的
:hover悬浮的时候
:link未被访问过的链接
:visited被访问过的链接
:first-child讲样式添加到元素的第一个子元素
伪元素种类--
::first-letter将样式添加到文本的首字母
::first-line首行
::before在某元素之前插入一些内容{content:‘‘}

时间： 2024-10-09 01:24:02

CSS3常用的相关文章

CSS3常用知识点

CSS3常用知识点 1 css3选择器 1.1 属性选择器 /* E[attr~=val] 表示的一个单独的属性值 这个属性值是以空格分隔的*/ .attr2 a[class~="kawa"] { //TODO } /* E[attr|=val] 表示的要么一个单独的属性值 要么这个属性值是以"-"分隔的*/ .attr3 a[class|="kawa"] { //TODO } /* E[attr*=val] 表示的属性值里包含val字符并且在&

CSS3常用形状

CSS3常用形状实现代码 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style> 7 div{width:100px; height:100px; background:#f00; margin:50px; text-align:center; line-height

css3常用工具

渐变生成器:http://colorzilla.com/gradient-editor/ 背景图案:http://lea.verou.me/css3patterns/ html5和css3浏览器支持情况:http://caniuse.com/ IE Tester:http://www.my-debugbar.com/wiki/IETester/HomePage Modernizr(让老版本浏览器支持html5标签,支持按需加载):http://www.modernizr.com Response

CSS3常用功能的写法 转

CSS3常用功能的写法 作者: 阮一峰 随着浏览器的升级,CSS3已经可以投入实际应用了. 但是,不同的浏览器有不同的CSS3实现,兼容性是一个大问题.上周的YDN介绍了CSS3 Please网站,该网站总结了一些常用功能的写法. 以下就是这些写法的详细介绍.所有代码都经过了Firefox 3.6和IE 8.0的验证,原文的错误之处也已得到改正. 一.圆角(Rounded Corner) .box_round { -moz-border-radius: 30px; /* FF1+ */ -web

CSS3常用选择器（一）

在 CSS 中,选择器是一种模式,用于选择需要添加样式的元素.比如最常用到的#id,.class,标签选择器. 随着CSS3到来,增加了很多新型选择器,这里就常用的做一个总结. 1.属性选择器. 在css3中,追加了三个属性选择器,分别为[attribute*=value],[attribute^=value],[attribute$=value],使选择器有了通配符的概念.这三个选择器分别是包含,首字符,结束字符. 举个栗子: a[src*="abc"]表示选择其 src 属性中包含

CSS3常用选择器总结

CSS3选择器 中午吃饭时与同事简单聊了下H5和C3为我们提供的便利,晚上下班后简单整理了下CSS3的选择器,在这里跟大家分享下. CSS3新增了许多灵活查找元素的方法,极大的提高了我们查找元素的效率和精准度.CSS3选择器与jQuery中所提供的绝大部分选择器兼容. 1.属性选择器 其特点是通过属性来选择元素,具体有以下5种形式(E是element的首字母,下面都是简写代替,程序员总是那么懒,哈哈哈): 1.E[attr] 表示存在attr属性即可: /*存在*/ [class]{/*选中的是

css3常用动画+动画库

一.animates.css animate.css是来自dropbox的工程师Daniel Eden开发的一款CSS3的动画效果小类库.包含了60多款不同类型的CSS3动画,包括:晃动,闪动,各种淡出淡出效果,如果你想快速的整合各种CSS3动画特效的话,使用它即可方便的实现. 查看演示: https://daneden.github.io/animate.css/ github地址: https://github.com/daneden/animate.css 二.magic.css动画库 查

CSS3 常用属性（一）-- 边框、背景

现今,界面极大的丰富,传统的 HTML+CSS 已经跟不上时代的步伐,在 CSS3 中,有太多非常好用的属性,可以很方便的做出种种炫酷的效果,接下来,我将例举一些常用的 CSS3 的属性. border-radius:圆角. border-radius : 50px ; /*四个角的圆角均为50px*/ border-radius : 50px 100px; /*左上右下的圆角是50px,左下右上的圆角是100px*/ border-radius : 10px 20px 30px 40px; /

CSS3常用功能的写法

随着浏览器的升级,CSS3已经可以投入实际应用了. 但是,不同的浏览器有不同的CSS3实现,兼容性是一个大问题.上周的YDN介绍了CSS3 Please网站,该网站总结了一些常用功能的写法. 以下就是这些写法的详细介绍.所有代码都经过了Firefox 3.6和IE 8.0的验证,原文的错误之处也已得到改正. 一.圆角(Rounded Corner) .box_round { -moz-border-radius: 30px; /* FF1+ */ -webkit-border-radius: 3

css3常用标签

30个最常用css选择器解析 你也许已经掌握了id.class.后台选择器这些基本的css选择器.但这远远不是css的全部.下面向大家系统的解析css中30个最常用的选择器,包括我们最头痛的浏览器兼容性问题.掌握了它们,才能真正领略css的巨大灵活性. 1. * * { margin: 0; padding: 0; } 星状选择符会在页面上的每一个元素上起作用.web设计者经常用它将页面中所有元素的margin和padding设置为0. *选择符也可以在子选择器中使用. #container *