安科网

css3基础-选择器+边框与圆角+背景与渐变

jiedinghui

jiedinghui

2019-12-30

关注 关注

Css3选择器相关：

section > div直接子元素选择器

div + article相邻兄弟选择器（在元素之后出现）

div ~ article通用兄弟选择器（在元素之后出现）

属性选择器：

a[href] {
    text-decoration: none;
}
a[href="#"] {
    color: #f00;
}
/*包含two且属性值用空格分隔：*/
a[class~="two"] {
    color: #ff0;
}
/*属性的第一个值以#开头：*/
a[href^="#"] {
    color: #0f0;
}
/*以#结尾：*/
a[href$="#"] {
    color: #00f;
}
/*包含#：*/
a[href*="#"] {
    color: #0ff;
}
/*第一个属性值以#-开头：*/
a[href|="#"] {
    color: #f0f;
}

UI元素伪类：

Input:disabled

Input:enabled

Input:checked

div:first-child匹配属于其父元素的第1个子元素且是div，计数时不分类型，显示时分类型

div:last-child匹配属于其父元素的最后1个子元素且是div，计数时不分类型，显示时分类型div:nth-child(2) 匹配属于其父元素的第n个子元素且是div，计数时不分类型，显示时分类型div:nth-lat-child(2) 匹配属于其父元素的第n个子元素且是div，计数时不分类型，显示时分类型

n匹配下标，从0开始计算：

li:nth-child(2n) 双数

li:nth-child(2n+1) 单数

li:nth-child(n+4)

li:nth-child(odd) 奇数，下标从1开始计算

li:nth-child(even) 偶数，下标从1开始计算

li:nth-last-child(3) 倒数第3个

article:only-child 属于父元素的唯一元素，且是article(没有任何其他子元素)

div:nth-of-type(2) 匹配属于其父元素的第2个子元素且是div，计数时分类型

div:nth-last-of-type(2)

div:first-of-type div:last-of-type

article:only-of-type 属于父元素的唯一article元素（可以有其他类型的子元素）

div:empty 没有子元素的div元素（包括文本也没有）

a:not(:last-of-type) 不是最后一个a子元素

id选择器权重大于属性选择器

.red > [class=”red”]

Css伪元素：

div::selection 文本被选中后的样式

::-moz-selection  火狐

Css3边框与圆角：

 

四个值按照顺时针方向来

Border-radius兼容性写法：

-webkit-border-radius: 50%;
       -moz-border-radius: 50%;
        -ms-border-radius: 50%;
         -o-border-radius: 50%;
            border-radius: 50%;

box-shadow水平偏移 垂直偏移 模糊 扩展 颜色 内部

box-shadow: 50px 30px 0px 0px yellow inset;

border-image-repeat:stretch（拉伸）/repeat（重复）/round（铺满）/initial/inherit

border-image-source: url("border.jpg");
    border-image-slice: 50%;/*图像边界向内偏移*/
    border-image-width: 50%;/*图像边界的宽度*/
    border-image-outset: 2; /*在边框外部绘制*/
    border-image-repeat: repeat;

css3背景与渐变：

背景绘制区域（显示范围）

background-clip: border-box;
background-clip: padding-box;
background-clip: content-box;

背景图像定位（起始位置，原点位置，与偏移搭配使用）

background-origin: border-box;
background-origin: padding-box;
background-origin: content-box;
background-position:10px 10px; /*与偏移搭配使用*/

background-size只写一个值，第二个默认是auto，根据比例等比缩放

background-size: contain; /*等比缩放到某一边达到容器边缘*/
background-size: cover;/*等比缩放填满容器*/
background-size: 800px 500px;
background-size: 800px;
background-size: 50% 50%;
background-size: 50%;
background-size: 100% 100%;
background-size: 100%;

background-image多重背景，前面的会覆盖后面的

background-image: url(‘bg2.png‘), url(‘bg1.jpg‘);

demo：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>background-image</title>
    <style type="text/css">
        div{
            width:300px;
            height:300px;
            background:url(1.jpg) no-repeat center top,
            url(2.jpg) no-repeat center 100px,
            url(3.jpg) no-repeat center 200px;
            margin:0 auto;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

css3基础-选择器+边框与圆角+背景与渐变

默认从上到下渐变：

div {
    width: 800px; height: 500px;
    background: -webkit-linear-gradient(red, blue);
    background:    -moz-linear-gradient(red, blue);
    background:      -o-linear-gradient(red, blue);
    background:         linear-gradient(red, blue);
}

从左到右渐变

div {
    width: 800px; height: 500px;
    background: -webkit-linear-gradient(left, red , blue);
    background:    -moz-linear-gradient(right, red, blue);
    background:      -o-linear-gradient(right, red, blue);
    background:         linear-gradient(to right, red , blue);
}

左上角开始的对角线渐变

div {
    width: 800px; height: 500px;
    background: -webkit-linear-gradient(       left top, red, yellow, blue);
    background:    -moz-linear-gradient(   right bottom, red, yellow, blue);
    background:      -o-linear-gradient(   right bottom, red, yellow, blue);
    background:         linear-gradient(to right bottom, red, yellow, blue);
}

角度控制方向

角度渐变是水平线和渐变线之间的角度，0deg是从下到上，90度是从左到右

div {
    width: 800px; height: 500px;
    background: -webkit-linear-gradient(135deg, red, yellow, blue);
    background:    -moz-linear-gradient(135deg, red, yellow, blue);
    background:      -o-linear-gradient(135deg, red, yellow, blue);
    background:         linear-gradient(135deg, red, yellow, blue);
}

渐变具体位置控制

div {
    width: 800px; height: 500px;
    background: -webkit-linear-gradient(90deg, red 10%, orange 15%, yellow 20%, green 50%, blue 70%, indigo 80%, violet 100%);
    background:    -moz-linear-gradient(90deg, red 10%, orange 15%, yellow 20%, green 50%, blue 70%, indigo 80%, violet 100%);
    background:      -o-linear-gradient(90deg, red 10%, orange 15%, yellow 20%, green 50%, blue 70%, indigo 80%, violet 100%);
    background:         linear-gradient(90deg, red 10%, orange 15%, yellow 20%, green 50%, blue 70%, indigo 80%, violet 100%);
}

透明色渐变

div {
    width: 800px; height: 500px;
    background: -webkit-linear-gradient(90deg, rgba(255, 0, 0, 0), rgba(255, 0, 0, 1));
    background:    -moz-linear-gradient(90deg, rgba(255, 0, 0, 0), rgba(255, 0, 0, 1));
    background:      -o-linear-gradient(90deg, rgba(255, 0, 0, 0), rgba(255, 0, 0, 1));
    background:         linear-gradient(90deg, rgba(255, 0, 0, 0), rgba(255, 0, 0, 1));
}

重复渐变

div {
    width: 800px; height: 500px;
    background: -webkit-repeating-linear-gradient(90deg, red 0%, blue 10%, red 20%);
    background:    -moz-repeating-linear-gradient(90deg, red 0%, blue 10%, red 20%);
    background:      -o-repeating-linear-gradient(90deg, red 0%, blue 10%, red 20%);
    background:         repeating-linear-gradient(90deg, red 0%, blue 10%, red 20%);
}

径向渐变，从内到外

div {
    width: 800px; height: 500px;
    background: -webkit-radial-gradient(red, blue);
    background:    -moz-radial-gradient(red, blue);
    background:      -o-radial-gradient(red, blue);
    background:         radial-gradient(red, blue);
}

圆形渐变

div {
    width: 800px; height: 500px;
    background: -webkit-radial-gradient(circle, red, blue);
    background:    -moz-radial-gradient(circle, red, blue);
    background:      -o-radial-gradient(circle, red, blue);
    background:         radial-gradient(circle, red, blue);
}

椭圆形渐变

div {
    width: 800px; height: 500px;
    background: -webkit-radial-gradient(ellipse, red, blue);
    background:    -moz-radial-gradient(ellipse, red, blue);
    background:      -o-radial-gradient(ellipse, red, blue);
    background:         radial-gradient(ellipse, red, blue);
}

渐变从圆心到最近边

div.closest-side {
    width: 300px; height: 200px; margin: 50px;
    background: -webkit-radial-gradient(30% 70%, circle closest-side, red, blue);
    background:    -moz-radial-gradient(30% 70%, circle closest-side, red, blue);
    background:      -o-radial-gradient(30% 70%, circle closest-side, red, blue);
    background:         radial-gradient(30% 70%, circle closest-side, red, blue);
}

渐变从圆心到最远边

div.farthest-side {
    width: 300px; height: 200px; margin: 50px;
    background: -webkit-radial-gradient(30% 70%, farthest-side, red, blue);
    background:    -moz-radial-gradient(30% 70%, farthest-side, red, blue);
    background:      -o-radial-gradient(30% 70%, farthest-side, red, blue);
    background:         radial-gradient(30% 70%, farthest-side, red, blue);
}

渐变从圆心到最近角

div.closest-corner {
    width: 300px; height: 200px; margin: 50px;
    background: -webkit-radial-gradient(30% 70%, closest-corner, red, blue);
    background:    -moz-radial-gradient(30% 70%, closest-corner, red, blue);
    background:      -o-radial-gradient(30% 70%, closest-corner, red, blue);
    background:         radial-gradient(30% 70%, closest-corner, red, blue);
}

渐变从圆心到最远角

div.farthest-corner {
    width: 300px; height: 200px; margin: 50px;
    background: -webkit-radial-gradient(30% 70%, farthest-corner, red, blue);
    background:    -moz-radial-gradient(30% 70%, farthest-corner, red, blue);
    background:      -o-radial-gradient(30% 70%, farthest-corner, red, blue);
    background:         radial-gradient(30% 70%, farthest-corner, red, blue);
}

IE渐变从上到下

div {
    width: 800px;
    height: 500px;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=‘#ff0000‘, endColorstr=‘#0000ff‘,GradientType=0 );
}

IE渐变从左到右

div {
    width: 800px;
    height: 500px;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=‘#ff0000‘, endColorstr=‘#0000ff‘,GradientType=1 );
}

Demo：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>线性渐变 - 特殊案例</title>
<style type="text/css">
div {
    width: 800px; height: 500px; background: #abcdef; background-size: 50px 50px;
    background-image:
        -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.25, #555), color-stop(.25, transparent), to(transparent)),
        -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, #555), color-stop(.25, transparent), to(transparent)),
        -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.75, transparent), color-stop(.75, #555)),
        -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.75, transparent), color-stop(.75, #555));
    background-image:
        -moz-linear-gradient(45deg, #555 25%, transparent 25%, transparent),
        -moz-linear-gradient(-45deg, #555 25%, transparent 25%, transparent),
        -moz-linear-gradient(45deg, transparent 75%, #555 75%),
        -moz-linear-gradient(-45deg, transparent 75%, #555 75%);
    background-image:
        -o-linear-gradient(45deg, #555 25%, transparent 25%, transparent),
        -o-linear-gradient(-45deg, #555 25%, transparent 25%, transparent),
        -o-linear-gradient(45deg, transparent 75%, #555 75%),
        -o-linear-gradient(-45deg, transparent 75%, #555 75%);
    background-image:
        linear-gradient(45deg, #555 25%, transparent 25%, transparent),
        linear-gradient(-45deg, #555 25%, transparent 25%, transparent),
        linear-gradient(45deg, transparent 75%, #555 75%),
        linear-gradient(-45deg, transparent 75%, #555 75%);
}
</style>
</head>
<body>
<div></div>
</body>
</html>

css3基础-选择器+边框与圆角+背景与渐变

css选择器 css

jiedinghui

jiedinghui

0 关注 0 粉丝 0 动态

关注 关注

相关推荐

CSS元素选择器是怎样运作的？

在前端工程师的日常工作中，使用 CSS 元素选择器是稀松平常的事；无论你是编写一般的 CSS 还是需要经过编译的 SASS，SCSS，LESS等，最终都被编译成一行一行的 CSS 样式属性，最终交给浏览器解析并套用。但是你想过没有这是如何实现的呢?CSS

jiedinghui 2020-10-25

16个非常有用的CSS伪选择器，你千万不要错过了！

熟悉所有的 CSS 是实现这个目标的一种方法 —— 另一种是实施最佳实践和尽可能的减少代码。这个伪元素选择器选择换行之前文本的首行。这个伪元素选择器应用于元素中文本的首字母。应用于任何被用户选中的高亮区域。在 HTML 中，为 HTML 元素。这个规则将应

葉無聞 2020-09-01

CSS选择器

应用于页面中的所有元素。匹配元素名称与选择器相似的元素。应用于<h1>元素，<h2>元素和<h3>元素。应用于所有class特性值为note的元素。匹配指定元素的后代元素。应用于所有位于<p>元素中的<

buttonChan 2020-08-02

CSS基础总结 选择器

CSS选择器分为元素选择器，组合选择符，属性选择符，伪类选择符，伪对象选择符五种。div p{ } --->选取所有<div> 元素和 <p> 元素。指定只有当<p>元素是其父级的第一个子级的样式。

drdrsky 2020-07-05

为什么是link-visited-hover-active原理这样的特殊

通常我们在设置链接的一些伪类样式时，要让不同的状态显示正确的样式，我们需要按一定的顺序设置这些伪类的样式。这里我就按css2规范中推荐的顺序进行介绍，即link-visited-hover-active，可记为LoVe-HAte。下面我们分别来看看特殊性、

葉無聞 2020-07-05

CSS 选择器常见的有几种?

注意选择器之间不能有空格，要紧挨在一起。[属性名*="属性值"] 选取属性值包含指定内容的元素

xiaohuli 2020-07-05

Java学习（十二）

今天安装讲师推荐下载了一个叫Hbuiler X的IDE，并且学习了选择器的知识。选择器1选择器2{}//同时满足2个选择器条件的才会使用大括号内的样式也可以选中全页面统一样式。static{}中的代码叫做静态代码块，在类加载时执行，且只执行一次，从上而下的

opspider 2020-06-28

Selenium系列之--06 CSS SELECTOR选择器的一些写法

//div#radio>input:nth-of-type 选择id为radio的div下的第4个input节点。//input.Volvo[name=‘identity‘] 选择class为.Volvo并且name为identity的input节点

zhanghaibing00 2020-06-28

jQuery基础及选择器2

$.css;//同辈元素选择器。$.css;//a标签带有class属性

e度空间 2020-06-28

css基础选择器

《长恨歌》是唐代诗人白居易的一首长篇叙事诗。全诗形象地叙述了唐玄宗与杨贵妃的爱情悲剧。诗人借历史人物和传说，创造了一个回旋宛转的动人故事，并通过塑造的艺术形象，再现了现实生活的真实，感染了千百年来的读者，诗的主题是“长恨”。该诗对后世诸多文学作品产生了深远

opspider 2020-06-26

CSS的选择器

匹配所有具有att属性的E元素，不考虑它的值。匹配所有att属性具有多个连字号分隔的值、其中一个值以“val”开头的E元素，主要用于lang属性，比如“en”、“en-us”、“en-gb”等等。q:lang { quotes: “\201D” “\201

somboy 2020-06-26

css

表现HTML或XHTML文件样式的计算机语言。包括对字体、颜色、边距、高度、宽度、背景图片、网页定位等设定。网页的表现统一，容易修改。丰富的样式，使得页面布局更加灵活。减少网页的代码量，增加网页的浏览速度，节省网络带宽。运用独立于页面的CSS，有利于网页被

sdbxpjzq 2020-06-25

一分钟了解HTML 与 CSS（乐字节，乐字节java，乐字节架构）4

如需要跟多资料请点击右侧 → 这是一条不归路，有秃头风险，请慎重选择！在 CSS 中，选择器是一种模式，用于选择需要添加样式的元素。CSS选择器有很多，掌握常用的即可；CSS样式的优先级，是根据选择器的精确度/权重来决定的，常见的权重如下，权重越大，优先级

xiaohuli 2020-06-17

伪元素选择器

伪类本质上是为了弥补常规 CSS 选择器的不足，以便获取到更多信息；伪元素本质上是创建了一个有内容的虚拟容器；因此不能应用在替换元素或单标签元素上， 比如 img 或 br 元素。

zhanghaibing00 2020-06-14

jQuery部分选择器示例

jQuery是目前最流行的JavaScript程序库，它是对JavaScript对象和函数的封装。它能做的JavaScript也都能做，但使用jQuery能大幅提高开发效率。=test]").css;});});二、通过过滤选择器选择元素1.基本

牵手白首 2020-06-14

CSS基础内容

　　　* 在head标签内，定义link标签，引入外部的资源文件。　　　　　1） id选择器：选择具体的id属性值的元素。建议在一个html页面中id值唯一。　　　　粘连问题：当元素的上边缘和上级元素的上边缘重叠时，给元素添加上外边距，会出现粘连问题，通过

teresalxm 2020-06-13

css的属性选择器和伪类

<!

AlisaClass 2020-06-10

css_选择器

DOCTYPE html><html lang="en"><head> <title>Title</title> <style> /*通用*/

somboy 2020-06-09

css: 伪类和伪元素选择器

在页面中，有时候同一个元素在不同动作下有不同的样式。这几种情况下这个链接的标签并没有变化，有变化的只是它的状态，这时候就可以里用伪类来实现这个需求。在浏览器中，伪类的出现是为了向某些选择器添加特殊的效果或限制。伪类是在正常的选择器后面加上伪类名称，中间用冒

覆雪蓝枫 2020-06-09

css1

0级：通配符选择器、选择符和逻辑组合伪类:不影响css优先级，逻辑组合伪类括号中的选择器会影响优先级

沈宫新 2020-06-07
jiedinghui

jiedinghui

W3CSchool教程
HTML 教程
CSS 教程
Bootstrap 教程
Javascript 教程
jQuery 教程
后端教程
C 教程
Java 教程
PHP 教程
Python 教程
Go 教程
移动开发
Android 教程
Swift 教程
Kotlin 教程
jQuery Mobile 教程
ionic 教程
关于我们
新闻动态
联系方式
招聘英才
安科实验室
帮助与反馈

安科网(Ancii)，中国第一极客网

Copyright © 2013 - 2019 Ancii.com

京ICP备18063983号 京公网安备11010802014868号