css3

最新推荐文章于 2024-09-16 08:26:31 发布

酷酷的涵哥

最新推荐文章于 2024-09-16 08:26:31 发布

阅读量119

点赞数

分类专栏： css3 文章标签： css3

本文链接：https://blog.csdn.net/qq_35415374/article/details/83411877

版权

css3 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

渐变色
```
background-image: linear-gradient(to left, red, orange, yellow)
```
第一个参数：指定渐变方向，可以用“角度”的关键词或“英文”来表示：

角度英文作用
0deg to top 从下至上
90deg to right 从左至右
180deg to bottom 从上至下
270deg to left 从右至左
to top left 从右下至左上
to bottom right 从左上至右下
第二个和第三个参数，表示颜色的起始点和结束点，可以有多个颜色值。
文字与字体
text-overflow用来设置是否使用一个省略标记（...）标示对象内文本的溢出。
```
text-overflow: clip        //剪切
text-overflow: ellipsis        //省略
```
但是text-overflow只是用来说明文字溢出时用什么方式显示，要实现溢出时产生省略号的效果，还须定义强制文本在一行内显示（white-space:nowrap）及溢出内容为隐藏（overflow:hidden），只有这样才能实现溢出文本显示省略号的效果：
```
text-overflow: ellipsis
overflow: hidden
white-space: nowrap
```
word-wrap也可以用来设置文本行为，当前行超过指定容器的边界时是否断开转行。
```
word-wrap: normal
word-wrap: break-word        //在内容边界换行
```
文本阴影
```
text-shadow: X-Offset Y-Offset blur color

text-shadow: 0 1px 1px #fff
```
X-Offset：表示阴影的水平偏移距离，其值为正值时阴影向右偏移，反之向左偏移
Y-Offset：是指阴影的垂直偏移距离，如果其值是正值时，阴影向下偏移，反之向上偏移
Blur：是指阴影的模糊程度，其值不能是负值，如果值越大，阴影越模糊，反之阴影越清晰，如果不需要阴影模糊可以将Blur值设置为0
Color：是指阴影的颜色，其可以使用rgba色

背景
1) background-origin 设置元素背景图片的原始起始位置

background-origin: border-box
background-origin: padding-box
background-origin: content-box

2) background-clip 用来将背景图片做适当的裁剪以适应实际需要

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

css选择器
1) 属性选择器

属性选择器	功能
div[att^ = 'val']	匹配以val开头的att属性
div[att$ = 'val']	匹配以val结尾的att属性
div[att* = 'val']	匹配任意位置包含val的att属性

html:

<a href="xxx.pdf">我链接的是PDF文件</a>
<a href="#" class="icon">我类名是icon</a>
<a href="#" title="我的title是more">我的title是more</a>

css:

a[class^=icon]{
  background: green;
  color:#fff;
}
a[href$=pdf]{
  background: orange;
  color: #fff;
}
a[title*=more]{
  background: blue;
  color: #fff;
}

2) 结构性伪类选择器
① root

:root {background:orange;}

“:root”选择器等同于<html>元素，简单点说：

:root{background:orange}

html{background:orange}

得到的效果等同。

② not
:not选择器称为否定选择器，可以选择除某个元素之外的所有元素

input:not([type="submit"]){
  border:1px solid red;
}

给除了type="submit"的input之外所有的input添加边框。

③ empty
:empty选择器表示的就是空。用来选择没有任何内容的元素，这里没有内容指的是一点内容都没有，哪怕是一个空格。

<p></p>

p:empty {
  display: none;
}

④ target
:target选择器称为目标选择器，用来匹配文档(页面)的url的某个标志符的目标元素

<h2><a href="#brand">Brand</a></h2>
<div class="menuSection" id="brand">
    content for Brand
</div>

.menuSection{
  display: none;
}
#brand:target{/*这里的:target就是指id="brand"的div对象*/
  display:block;
}

⑤ first-child / last-child / nth-child(n) / nth-last-child(n) / first-of-type / last-of-type / nth-of-type(n) / nth-last-of-type(n) / only-child / only-of-type

ol li:first-child{
    color: red;
}

ol li:last-child {
    color: red;
}

ol li:nth-child(2n){
    color: red;
}

ol li:nth-last-child(5){        // 倒数第五个li
    color: red;
}

.wrapper p:first-of-type {        /*我要改变第一个p的背景为橙色*/
  background: orange;
}

.wrapper p:last-of-type{
  background: orange;
}

.wrapper p:nth-of-type(2n){
  background: orange;
}

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

.post p:only-child {
  background: orange;
}

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

⑥ 待补充...

变形与动画
1）旋转 rotate()

div{transform: rotate(45deg)}

2）扭曲/斜体 skew()

div{transform:skew(45deg)}

3）缩放 scale()

div{transform: scale(1.5)}

4）位移 translate()

div{transform: translate(50px,100px)}

// 水平垂直居中
div{
    width: 200px;
    height: 200px;
    background: black;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

5）原点 transform-origin

div{transform-origin: left top}

6）过渡 transition

div{
    transition-property: width        //指定过度属性
    transition-duration：1s        //过渡时间
    transition-delay: 0.2s        //延迟时间
    transition-timing-function: ease        //延迟函数
}

transition-timing-function分类：ease(默认)、linear、ease-in、ease-out、ease-in-out

7）Keyframes

@keyframes around{
    0% {
        transform: translateX(0);
    }
    25%{
        transform: translateX(180px);
    }
    50%{
        transform: translate(180px, 180px); 
    }
    75%{
        transform:translate(0,180px);
    }
    100%{
        transform: translateY(0);
    }
}

div {
    animation: around 5s ease 0.1s;
}

div{
    animation-name: around
    animation-duration：1s
    animation-delay: 0.2s
    animation-timing-function: ease
    animation-iteration-count: infinite
    animation-direction: alternate
    animation-play-state: running
}

//播放次数animation-iteration-count为整数或者infinite
//播放方向animation-direction一般为normal或alternate(循环播放)
//播放状态animation-play-state为running或paused

8）多列显示 columns

div{
    columns: 200px 2;        //分为两列显示，每列宽度200px
    column-gap: 2em;       //列间距
    column-rule: 1px dotted red;        //边框
    column-span: all || none;        //跨列
}

酷酷的涵哥

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

角度	英文	作用
0deg	to top	从下至上
90deg	to right	从左至右
180deg	to bottom	从上至下
270deg	to left	从右至左
	to top left	从右下至左上
	to bottom right	从左上至右下