欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

Css3 常用选择器 背景 边框 渐变

程序员文章站 2022-05-11 10:54:01
...

选择器:
Ele~ele2: 选择Ele 后面的ele2标签

p~ul{background:#ff0000;} //为所有相同的父元素中位于 p 元素之后的所有 ul 元素设置背景:

Ele[key(^$*)=value] 选择对应的元素(^开头,﹩结束*包含)

div[class^="test"]{background:#ffff00;} //设置 class 属性值以 "test" 开头的所有 div 元素的背景色:

Ele[key=value] 选择 target=”_blank” 的所有元素。

a[target=_blank]{ background-color:yellow;} //为 target="_blank" 的 <a> 元素设置样式:

:root 文档的根元素

body:root{ background:#ff0000;} //设置 HTML 文档的背

:empty 选择文档中的 所有空元素

p:empty{ background:#ff0000;} //指定空的 p 元素的背景色:

:target 选择 **的元素(#sss)

p:target{ border: 2px solid #D4D4D4;background-color: #e5eecc;} //突出显示活动的 HTML 锚:

:disabled 选择每一个禁用的输入元素

input[type="text"]:disabled{ background-color: #dddddd;} //为所有 type="text" 的被禁用的 input 元素设置背景色:

:enabled 选择每一个已启用的输入元素

input[type="text"]:enabled{ background-color: #ff0000;} //为所有 type="text" 的已启用的 input 元素设置背景色:

:checked 选择每个选中的输入元素

input:checked{ background-color: #ff0000;} //为所有被选中的 input 元素设置背景色:

:not() 选择每个并非p元素的元素

body:not(p){ background-color: #ff0000;} //设置非 <p> 元素的所有元素的背景色:

::selection 匹配元素中被用户选中或处于高亮状态的部分

::selection{color:#ff0000;}
::-moz-selection{color:#ff0000;}   //使被选中的文本成为红色:

:out-of-range 匹配值在指定区间之外的input元素

input:out-of-range{ border:2px solid red;} //输入的值在指定区间外时,设置指定样式:

:in-range 匹配值在指定区间之内的input元素

input:in-range{ border:2px solid yellow;} //输入的值在指定区间内时,设置指定样式:

:read-write 用于匹配可读及可写的元素

input:read-write{ background-color: yellow;} //如果 input 元素不是只读,即没有 "readonly" 属性,设置输入框样式为黄色:

:read-only 用于匹配设置 “readonly”(只读) 属性的元素

input:read-only{ background-color: yellow;} //如果 input 元素设置了 "readonly" 属性,设置输入框样式为黄色:

:optional 用于匹配可选的输入元素

input:optional{ background-color: yellow;} //如果 input 元素没有设置 "required" 属性,设置其为黄色:

:require 用于匹配设置了 “required” 属性的元素

input:required{ background-color: yellow;} //如果 input 元素设置了 "required" 属性,设置其为黄色:

:valid 用于匹配输入值为合法的元素

input:valid{ background-color: yellow;} //如果 input 元素中输入的值为合法的,设置其为黄色:

:invalid 用于匹配输入值为非法的元素

input:invalid{ border:2px solid red;}  //如果 input 元素中的值是非法的,设置样式为红色:

Background系列属性
background-origin:设置背景图片的原点
值:border-box(背景图像边界框的相对位置)
padding-box( 背景图像填充框的相对位置)
content-box(背景图像的相对位置的内容框)

div
{
background-image:url('smiley.gif');
background-repeat:no-repeat;
background-position:left;
background-origin:content-box; //内容框相对定位的背景图片
}

Background-clip: 裁切图片容器里面内容
值同上:border-box padding-box content-box

div
{
background-color:yellow;
background-clip:content-box;
}

Background-attachment:设置背景图片 是否随着滚动
值:scroll 背景图片随页面的其余部分滚动。这是默认
fixed 背景图像是固定的
inherit 指定background-attachment的设置应该从父元素继承

body
{ 
background-image:url('smiley.gif');
background-repeat:no-repeat;
background-attachment:fixed;
}

Border:
Border-image:设置 边框背景图的全部
Border-image-resource:边框图片的路径
Border-image-slice:裁切图片的位置 上右下左 与margin padding类似只设置两个参数垂直 水平

div
{
border-image-source: url(border.png);
border-image-slice: 50% 50%;   //指定图像的边界向内偏移
}

border-image-width:可以直接设置 边框图片的宽度 不受到边框宽度的影响

div
{
border-image-source: url(border.png);
border-image-width: 30 30;  //指定图像边界的宽度:
}

border-image-outset:设置边框图片 向外扩展的距离 与父容器显示内容有关系

div
{
    border-image-source: url(border.png);
    border-image-outset: 30 30;
}

border-image-repeat:裁切之后 如果不是整个图片 会重复 或者 拉伸多于出来的这一部分

div {
    border-image-source: url(border.png);
    border-image-repeat: repeat;
}

box-shadow:盒子的阴影 颜色 X Y 模糊的范围 可以设置多组

div
{
    box-shadow: 10px 10px 5px #888888;
}

Text-shadow:设置文本的阴影

h1
{
    text-shadow: 2px 2px #ff0000;
}

Word-break:是否把一个单词 分开换行
值:normal 使用浏览器默认的换行规则。
break-all 允许在单词内换行。
keep-all 只能在半角空格或连字符处换行。

p.test {word-break:break-all;}

Word-wrap:是否 把一个长单词 分开
值:normal 只在允许的断字点换行(浏览器保持默认处理)。
break-word 在长单词或 URL 地址内部进行换行。

p.test {word-wrap:break-word;}

设置渐变
线性渐变:linear-gradient:(角度、方向,第一个颜色 百分比,第二个颜色 百分比 。。。)

#grad1 {
  /* Safari 5.1 to 6.0 */
  background: -webkit-repeating-linear-gradient(red, yellow 10%, green 20%);
  /* Opera 11.1 to 12.0 */
  background: -o-repeating-linear-gradient(red, yellow 10%, green 20%);
  /* Firefox 3.6 to 15 */
  background: -moz-repeating-linear-gradient(red, yellow 10%, green 20%);
  /* 标准语法 */
  background: repeating-linear-gradient(red, yellow 10%, green 20%);
}

径向渐变:radial-gradient:形状 半径大小 方向,颜色1,颜色2…

#grad {
  background: -webkit-radial-gradient(red, green, blue); /* Safari 5.1- 6.0 */
  background: -o-radial-gradient(red, green, blue); /* Opera 11.6-12.0 */
  background: -moz-radial-gradient(red, green, blue); /* Firefox 3.6-15 */
  background: radial-gradient(red, green, blue); /* 标准语法 */
}