css3选择器,背景,边框属性

css3动画实现效果,推荐大神博客
https://www.cnblogs.com/lhb25/p/must-read-links-for-web-designers-and-developers-volume-36.html

**css3注意:**兼容性问题,

prefix(前缀)浏览器(browser)
-webkit-Chrome & Safari
-moz-Firefox
-ms-IE
-0-Oprah

注:360浏览器有两种模式对应内核不同,兼容模式(IE,Chrome),极速模式(Chrome)

写法

-moz-border-radius{}
-o-border-radius{}
-ms-border-radius{}
-webkit-border-radius{}

css3选择器(自定义为常用选择器)

关系型选择器描述
A+B后一个满足条件的兄弟元素节点,必须是紧挨着的
A~B后一堆满足条件的兄弟元素节点


属性选择器描述
A[attr~=‘a’]属性值被a隔开的即可
A[attr l=‘a’]属性值为a 或者a-开头
A[attr^=‘a’]属性值以a开头
A[attr$=‘a’]属性值以a结尾
A[attr*=‘a’]属性值含有a
伪元素选择器描述
A:first-letterA当中的第一个字
A:first-lineA当中的第一行
A::selection当A被选中时添加的样式
A:before可理解为系统默认添加在A前面的行内元素
A:after可理解为系统默认添加在A后面的行内元素
A::placeholder选中input下的placeholder属性值


伪元素选择器描述
A:not(s)选中不含有s的A标签,s可以为属性例如[class=“a”],也可以用. a
A:root 根元素的意思在HTML中,root等于html ,:root == html
A:first-childA必须是父级元素中的第一个才能被选中
A:last-childA必须是父级元素中的最后一个才能被选中
A:only-childA必须是父级元素中的唯一的一个才能被选中
A:nth-child(n)必须是父级元素下的第n位A标签
A:nth-last-child(n)父级元素下的倒数第n位A标签
A:first-of-type父级元素下的第一位A标签(不必是父级元素的第一位子节点)
A:last-of-type父级元素下的最后一位A标签(不必是父级元素的最后一位子节点)
A:only-of-type父级元素下的唯一的一位A标签(不必是父级元素的第一位子节点)
A:nth-of-type(n)父级元素下的第n位A标签(不必是父级元素的第n位子节点)
A:nth-of-last-type(n)父级元素下的倒数第n位A标签(不必是父级元素的倒数第n位子节点)
A:empty匹配没有任何子元素(包括text节点)的元素A
A:checked匹配用户界面上处于选中状态的元素A。(用于input type为radio与checkbox时)
A:enabled匹配用户界面上处于可用状态的元素A
A:disabled用于选中标签属性设置disabled后为禁用状态的标签A
A:target:target选择器用于选取当前活动的目标元素。(当A做为锚点被访问时被选中)
A:read-only当A标签设置属性readonly="true"时,A被选中(readonly为只读状态)
A:read-write:read-write 选择器选取没有设置 “readonly” 属性的元素

拓展:




引用
链接:http://caibaojian.com/css3-properties.html

背景

CSS3新增了几个关于背景的属性,分别是background-clip、background-origin、background-size和background-break。

background-clip
background-clip属性用于确定背景画区,有以下几种可能的属性:

background-clip: border-box; 背景从border开始显示
background-clip: padding-box; 背景从padding开始显示
background-clip: content-box; 背景显content区域开始显示
background-clip: no-clip; 默认属性,等同于border-box
通常情况,背景都是覆盖整个元素的,利用这个属性可以设定背景颜色或图片的覆盖范围。

background-origin
background-clip属性用于确定背景的位置,它通常与background-position联合使用,可以从 border、padding、content来计算background-position(就像background-clip)。

background-origin: border-box; 从border开始计算background-position
background-origin: padding-box; 从padding开始计算background-position
background-origin: content-box; 从content开始计算background-position
background-size
background-size属性常用来调整背景图片的大小,主要用于设定图片本身。有以下可能的属性:

background-size: contain; 缩小图片以适合元素(维持像素长宽比)
background-size: cover; 扩展元素以填补元素(维持像素长宽比)可能会溢出
background-size: 100px 100px; 缩小图片至指定的大小
background-size: 50% 100%; 缩小图片至指定的大小,百分比是相对包 含元素的尺寸

background-break
CSS3中,元素可以被分成几个独立的盒子(如使内联元素span跨越多行),background-break 属性用来控制背景怎样在这些不同的盒子中显示。

边框阴影

盒子阴影box-shadow
[]内为可选,可不选
box-shadow阴影x坐标 阴影y坐标 模糊度 [阴影大小] 阴影颜色 [inset];
inset 定义元素的阴影类型为内阴影。该值为空时,则元素的阴影类型为外阴影;
阴影大小为边框的延伸宽度
box-shadow可以设定多组阴影效果,每组参数值以逗号分隔

例子:

box-shadow: 0px 0px 300px #fad,
					20px 0px 300px #ffa,
					-30px  20px 300px #f00,
					40px 20px 3000px #dad,
					inset 0px 0px 150px #fff,
					inset 0px  50px 50px #00f,
					inset  -20px  30px 180px  #f00;

内容延伸:
文字阴影:text-shadow

text-shadow:X Y 阴影模糊值 color;

例子:

    text-shadow: 0 0 5px #fff,
    0 0 20px #fefcc9,
    10px -10px 30px #feec85,
    -20px -20px 40px #ffae34,
    20px -40px 50px #ec760c,
    -20px -60px 60px #cd4606,
    0 -80px 70px #973716,
    10px -90px 80px #451b0e;

效果:
在这里插入图片描述

边框圆角

border-radius:

斜杠二组值:
第一组值表示水平半径,
第二组值表示垂直半径,
每组值也可以同时设置1到4个值,规则与上面相同。
四个属性值,分别表示左上角、右上角、右下角、左下角的圆角大小(顺时针方向)

在这里插入图片描述

在这里插入图片描述
例子:

.egg{

  width: 120px;

   height: 160px;

   background: #EC0465;

   border-radius: 60px 60px 60px 60px/100px 100px 60px 60px;

}

在这里插入图片描述




边框照片

引用:https://segmentfault.com/a/1190000010969367?utm_source=tag-newest
border-image
border-image-source:url(); 路径

图片剪裁位置border-image-slice
border-image-slice: 用百分比或正整数指定图像分割的位置;
该属性指定从上,右,下,左 4 个方位来分割图像,将图像分成4个角,4条边和中间区域共9份,中间区域始终是透明的(即没图像填充),除非加上关键字fill。

裁切方式是向内进行切割

边框图片九个区域与元素九个区域一一对应,也就是边框图片的相应部位就应用于元素的相应位置。
fill关键字如果存在的话,将会保留border-image中间的部分(预设是丢弃中间部分,留空处理)。

在这里插入图片描述
例子:

图片的尺寸是81(27*3)像素

在这里插入图片描述

border-image-slice:27px 27px 27px 27px;

第一个27px是从图片上边缘向内27px进行切割。

第二个27px是从图片右边缘向内27px进行切割。

第三个27px是从图片下边缘向内27px进行切割。

第四个27px是从图片左边缘向内27px进行切割。

在这里插入图片描述

重复性border-image-repeat
border-image-repeat:stretch(拉伸) | repeat(重复) | round(平铺) | space

stretch: 将被分割的图像使用拉伸的方式来填充满边框图像区域。
repeat: 将被分割的图像使用重复平铺的方式来填充满边框图像区域。当图像碰到边界时,如果超过则被截断。
round:当背景图像不能以整数次平铺时,会根据情况缩放图像。
space: 当背景图像不能以整数次平铺时,会用空白间隙填充在图像周围。

注意: round会凑整填充(进行了适度的拉伸)。repeat不进行拉伸,不凑整

*下图(27×3)px (27×3)pxpng 做实验

在这里插入图片描述
width: 400px;
height: 115px;
border-image: url(border.png) 27;
border-image-repeat:stretch;

如下
在这里插入图片描述

border-image: url(border.png) 27;
border-image-repeat:round;

如下
在这里插入图片描述

border-image: url(border.png) 27;
border-image-repeat:repeat;

如下
在这里插入图片描述

边框背景宽度border-image-width:
该属性用于指定使用多厚的边框来承载被裁剪后的图像。

值为不带单位的数字时它表示 border-width 的倍数
使用 auto, border-image-width 将会使用 border-image-slice 的值
使用百分比时参照图像边框区域的大小(包含border和padding)进行换算

例子:

border: 3em double orange;
border-image: url(border.png) 27 round;
border-image-width: 6rem;

如下图:
在这里插入图片描述

边框背景扩散border-image-outset

border-image-outset:
相当于把原来的图片位置向border外延伸。

如下图:

在这里插入图片描述

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值