CSS3学习_css正方形左上角为半圆形-优快云博客

本文详细介绍CSS3中的圆角、阴影、渐变色等效果的实现方法，并深入探讨了选择器的应用，包括属性选择器、伪选择器等，帮助读者掌握CSS3的高级应用技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

圆角效果

语法：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