CSS3学习

来源：互联网发布：华北水利水电大学知乎编辑：程序博客网时间：2024/06/04 19:18

圆角效果

语法：border-radius:?
?可以填一个参数、两个参数、四个参数：
- 两个参数，代表左上右下和右上左下。
- 四个参数，代表左上、右上、右下、左下。

利用圆角效果画半圆

div{    height:50px;/*是width的一半*/    width:100px;    background:#9da;    border-radius:50px 50px 0 0;/*半径至少设置为height的值*/    }

阴影效果

box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式];

这里写图片描述
如果需要添加多个阴影，用逗号隔开即可

.box_shadow{    box-shadow:4px 2px 6px #f00, -4px -2px 6px #000, 0px 0px 12px 5px #33CC00 inset;}

渐变色

background-image:linear-gradient(direction,color1,color2,color3...);

可以添加多个色值，且支持rbga。其中to left可以有以下选项:

参数含义 to bottom 从上往下 to left 从右往左 to right 从左往右 to top left 从右下到左上 0deg 从上往下，而且指的方向是顺时针递增 90deg 从左往右

注意：角度也支持负数

字体

嵌入字体

语法

@font-face {    font-family : 字体名称;    src : 字体文件在服务器上的相对或绝对路径;}

文字阴影

语法

text-shadow: X-Offset Y-Offset blur color;

图片

background-origin用于设置图片的原始起始位置

background-origin ： border-box | padding-box | content-box;

三个参数代表从盒子的外边界开始，从内边界开始，从盒子内的内容边界开始

图片裁剪

background-clip ： border-box | padding-box | content-box | no-clip

效果分别为这里写图片描述
图片拉伸

background-size: auto | <长度值> | <百分比> | cover | contain

cover代表将图片等比例拉伸直到图片的右和下边都贴到了边框位置，如果比例不合适，将会溢出边框，图片被裁减。
contain代表图片等比例拉伸，直到有一个边贴到了边框位置。

注意可以直接插入多个图片，只需要在background-image:的url()内多写几个即可，并以逗号隔开。在设置其他属性的时候，按照这个顺序。

CSS3选择器

一、通配符选择

CSS3增加了三个属性选择器，属性选择器有了通配符的概念。如下表：

属性选择器功能描述 element[attr^=’var’] 选择元素且其attr属性的属性值值以val开头 element[attr$=’val’] 选择元素，具有attr属性，且attr属性值以val**结尾** element[attr*=’val’ attr任意位置包含了val

例子
html

<body><a href="##" class="columnNews">我的背景想变成红色</a><a href="##" class="columnVideo">我的背景想变成红色</a><a href="##" class="columnAboutUs">我的背景想变成红色</a><br/><a href="1.doc">我的背景想变成绿色</a><a href="2.doc">我的背景想变成绿色</a><br/><a href="##" title="this is a box">我的背景想变成蓝色</a><a href="##" title="box1">我的背景想变成蓝色</a><a href="##" title="there is two boxs">我的背景想变成蓝色</a></body>

 a[class^='column']{     background-color:red; } a[href$='doc']{     background-color:green; } a[title*='box']{     background-color:blue; }

二、伪选择器

1、根选择器

:root{    ...}

即选中整个html文档

2、:not选择器

从选择的中不要一部分，语法

ele:not([attr = value]){    //...}//例子如下div:not([id="footer"]){  background: orange;}

3、空选择器empty

选择没有任何内容的元素。空格也算是有元素的，有子节点也算是有元素。
比如要将没有任何内容的节点隐藏起来，就可以使用这个选择器。语法

p:empty{    //选择没有内容的空段落    display:none;//隐藏起来}

4、：target选择器

根据我目前的理解是在html中a 有 href=’#target’的锚点指向，在点击这个a之后修改属性样式

#brand:target{  background: orange;  color: #fff;  //在点击超链接之后将target的相关属性进行修改。}

5、：first-child/last-child选择器

ul:first-child{    //...}

注意！！！选择的是第一个元素，而不是儿子元素

6、：nth-child(n)

与first-child类似，首先需要选中儿子元素的集合，然后再用这个选择器才行。即是选的是第n个元素，而不是第n个子元素。
“:nth-child(n)”选择器用来定位某个父元素的一个或多个特定的子元素。其中“n”是其参数，而且可以是整数值(1,2,3,4)，也可以是表达式(2n+1、-n+5)和关键词(odd、even)，但参数n的起始值始终是1，而不是0。也就是说，参数n的值为0时，选择器将选择不到任何匹配的元素。
这里写图片描述、

<ol>  <li>item1</li>  <li>item2</li>  <li>item3</li>  <li>item4</li>  <li>item5</li>  <li>item6</li>  <li>item7</li>  <li>item8</li>  <li>item9</li>  <li>item10</li></ol>

ol > li:nth-child(2n){  background: orange;}

7、：nth-last-child(n)

选中倒数第n个元素。

8、基于类型的子元素选择

div:nth-of-type(2n+1|even){    //选择第奇数个div元素}

p:first-of-type{    //选择第一个p元素}

.wrapper > p:nth-last-of-type(3){  background: orange;}

9、：only-child唯一的子元素

注意要清楚是指什么有唯一的子元素。
比如

<div class="post">  <p>我是一个段落</p>  <p>我是一个段落</p></div><div class="post">  <p>我是一个段落</p></div>

.post p {  background: green;  color: #fff;  padding: 10px;}.post p:only-child {  background: orange;//指的是p只有一个，即p的父元素只有p这一个子元素。}

10、：only-of-type选择器

基于节点类型，即这个节点类型只有唯一的一个。

<div class="wrapper">  <p>我是一个段落</p>  <p>我是一个段落</p>  <p>我是一个段落</p>  <div>我是一个Div元素</div></div><div class="wrapper">  <div>我是一个Div</div>  <ul>    <li>我是一个列表项</li>  </ul>  <p>我是一个段落</p></div>

.wrapper > div:only-of-type {  background: orange;}

11、:enabled选择器

这个是针对一些text输入框，复选框等有enabled属性的。与之相对的是:disabled选择器

<form action="#">  <div>    <label for="name">Text Input:</label>    <input type="text" name="name" id="name" placeholder="可用输入框"  />  </div>   <div>    <label for="name">Text Input:</label>    <input type="text" name="name" id="name" placeholder="禁用输入框"  disabled="disabled" />  </div></form>

div{  margin: 20px;}input[type="text"]:enabled {  background: #ccc;  border: 2px solid red;}

12、:checked选择器

13、::selection选择器

即文本被选中时候的样式。注意Firefox浏览器会有不同

::-moz-selection {  background: red;  color: green;}//火狐浏览器写法::selection {  background: red;  color: green;}

:read-only/read-write

选择只读元素/选择读写元素

变换篇

旋转rotate()

rotate(degree)来设置对象的旋转，正值为顺时针旋转。

transform:rotate(45deg);-webkit-transform(45deg);

语法浏览器 -ms-transform:rotate(7deg) -ms代表ie内核识别码 -moz-transform:rotate(7deg) -moz代表火狐内核识别码 -webkit-transform:rotate(7deg) -webkit代表谷歌内核识别码 -o-transform:rotate(7deg) -o代表欧朋【opera】内核识别码 transform:rotate(7deg) 统一标识语句。。。最好这句话也写下去，符合w3c标准

扭曲skew()

扭曲skew()函数能够让元素倾斜显示。它可以将一个对象以其中心位置围绕着X轴和Y轴按照一定的角度倾斜。这与rotate()函数的旋转不同，rotate()函数只是旋转，而不会改变元素的形状。skew()函数不会旋转，而只会改变元素的形状。

skew(x,y);//沿x,y方向扭曲x,y的角度skewX(x);//沿x方向扭曲x的角度，相当于skew(x)，即只有一个参数skewY(y);//沿y方向扭曲y的角度

缩放scale()

参数是以1为标准的浮点数。

函数含义 scale(x,y) 在x,y方向同时缩放，注意y是可选参数，如果没有则y=x scaleX(x) 仅在x方向上缩放 scaleY(y) 仅在y方向缩放

位移translate()

函数含义 translate(x,y) 在x,y方向同时位移，参数支持百分比（百分比是相对于自身的长宽） translateX(x) 仅在x方向上 translateY(y) 仅在y方向

针对百分比，举一个栗子

div{    width:400px;    height:400px;    position:absolute;    top:50%;    left:50%;    translate(-50%,-50%);}

top和left属性将div的左上角挪到了中央，但是整个div的中心却不在页面中央，因此可以通过-50%的位移来让div中心到页面中央！。

矩阵变换matrix()

据网友说是这样的

matrix(scaleX(),skewX(),skewY(),scaleY(),translateX(),translateY());

变形原点transform-origin

通过top left bottom right等设置，允许top left这种写法，也可以支持百分比 x y

0 0