CSS3新特性

CSS3新特性

CSS3是最新的CSS标准,旨在扩展CSS2.1

圆角

通过border-radius属性可以给任何元素制作圆角。

  • border-radius: 所有四个边角border-*-*-radius属性的缩写。
  • border-top-left-radius: 定义了左上角的弧度。
  • border-top-right-radius: 定义了右上角的弧度。
  • border-bottom-right-radius: 定义了右下角的弧度。
  • border-bottom-left-radius: 定义了左下角的弧度。
<div id="t1"></div>
<style type="text/css">
    #t1{
        height: 100px;
        width: 100px;
        background-color: blue;
        border-radius: 10px;
    }
</style>

盒阴影

box-shadow: h-shadow v-shadow blur spread color inset

  • h-shadow: 必需,水平阴影的位置,允许负值。
  • v-shadow: 必需,垂直阴影的位置,允许负值。
  • blur: 可选,模糊距离。
  • spread: 可选,阴影的大小。
  • color: 可选,阴影的颜色。在CSS颜色值寻找颜色值的完整列表。
  • inset: 可选,从外层的阴影改变阴影内侧阴影。
<div id="t2"></div>
<style type="text/css">
    #t2{
        height: 100px;
        width: 100px;
        border: 1px solid #eee;
        box-shadow: 5px 5px 5px #aaa;
    }
</style>

背景

CSS3中包含几个新的背景属性,提供更大背景元素控制。

  • background-image: 规定背景图片路径。
  • background-clip: 规定背景的绘制区域。
  • background-origin: 规定背景图片的定位区域。
  • background-size: 规定背景图片的尺寸。
<div id="t3"></div>
<style type="text/css">
    #t3{
        height: 100px;
        width: 100px;
        border: 1px solid #eee;
        background-image: url(https://blog.touchczy.top/favicon.ico);
        background-size:30px 30px;
        background-repeat:repeat;
        background-origin:content-box;
    }
</style>

渐变

CSS3渐变可以在两个或多个指定的颜色之间显示平稳的过渡。

  • Linear Gradients: 线性渐变,向下/向上/向左/向右/对角方向。
  • Radial Gradients: 径向渐变,由中心定义。
<div id="t4"></div>
<style type="text/css">
    #t4{
        height: 100px;
        width: 100px;
        border: 1px solid #eee;
        background-image: linear-gradient(to right,red,yellow);
    }
</style>

文本效果

CSS3对文本进行了更多的支持。

  • hanging-punctuation: 规定标点字符是否位于线框之外。
  • punctuation-trim: 规定是否对标点字符进行修剪。
  • text-align-last: 设置如何对齐最后一行或紧挨着强制换行符之前的行。
  • text-emphasis: 向元素的文本应用重点标记以及重点标记的前景色。
  • text-justify: 规定当text-align设置为justify时所使用的对齐方法。
  • text-outline: 规定文本的轮廓。
  • text-overflow: 规定当文本溢出包含元素时发生的事情。
  • text-shadow: 向文本添加阴影。
  • text-wrap: 规定文本的换行规则。
  • word-break: 规定非中日韩文本的换行规则。
  • word-wrap: 允许对长的不可分割的单词进行分割并换行到下一行。
<div id="t5">Text</div>
<style type="text/css">
    #t5{
        height: 100px;
        width: 100px;
        border: 1px solid #eee;
        color: #fff;
        text-shadow: -1px 3px 5px #333;
    }
</style>

字体

CSS3可以使用@font-face规则加载所需字体。

  • font-family: 必需,规定字体的名称。
  • src: 必需,定义字体文件的URL
  • font-stretch: 可选,定义如何拉伸字体,默认是normal
  • font-style: 可选,定义字体的样式,默认是normal
  • font-weight: 可选,定义字体的粗细,默认是normal
  • unicode-range: 可选,定义字体支持的UNICODE字符范围,默认是U+0-10FFFF
<div id="t6">Text</div>
<style type="text/css">
    @font-face{
        font-family: ff;
        src: url(https://cdn.jsdelivr.net/gh/WindrunnerMax/Yolov3-Train@2d965d2/keras-yolo3/font/FiraMono-Medium.otf);
    }
    #t6{
        height: 100px;
        width: 100px;
        border: 1px solid #eee;
        font-family:ff;
    }
</style>

2D转换

CSS3转换可以对元素进行移动、缩放、转动、拉长或拉伸。

  • transform: 适用于2D3D转换的元素。
  • transform-origin: 允许更改转化元素位置。
<div id="t7"></div>
<style type="text/css">
    #t7{
        height: 100px;
        width: 100px;
        border: 1px solid #eee;
        transform:rotate(10deg);
    }
</style>

3D转换

CSS3可以使用3D转换来对元素进行格式化。

  • transform: 向元素应用2D3D转换。
  • transform-origin: 允许你改变被转换元素的位置。
  • transform-style: 规定被嵌套元素如何在3D空间中显示。
  • perspective: 规定3D元素的透视效果。
  • perspective-origin: 规定3D元素的底部位置。
  • backface-visibility: 定义元素在不面对屏幕时是否可见。
<div id="t8"></div>
<style type="text/css">
    #t8{
        height: 100px;
        width: 100px;
        border: 1px solid #eee;
        transform:rotateX(10deg);
    }
</style>

动画

CSS3可以创建动画,它可以取代许多网页动画图像、Flash动画和JavaScript实现的效果。

  • @keyframes: 规定动画。
  • animation: 所有动画属性的简写属性,除了animation-play-state属性。
  • animation-name: 规定@keyframes动画的名称。
  • animation-duration: 规定动画完成一个周期所花费的秒或毫秒,默认是0
  • animation-timing-function: 规定动画的速度曲线,默认是ease
  • animation-fill-mode: 规定当动画不播放时,例如当动画完成时,或当动画有一个延迟未开始播放时,要应用到元素的样式。
  • animation-delay: 规定动画何时开始,默认是0
  • animation-iteration-count: 规定动画被播放的次数,默认是1
  • animation-direction: 规定动画是否在下一周期逆向地播放,默认是normal
  • animation-play-state: 规定动画是否正在运行或暂停,默认是running
<div id="t9"></div>
<style type="text/css">
    @keyframes animation{
        from {background:red;}
        to {background:yellow;}
    }
    #t9{
        height: 100px;
        width: 100px;
        border: 1px solid #eee;
        animation:animation 5s ease infinite alternate;
    }
</style>

过渡

CSS3中可以使元素从一种样式转变到另一个的时候,无需使用Flash动画或JavaScript

  • transition: 简写属性,用于在一个属性中设置四个过渡属性。
  • transition-property: 规定应用过渡的CSS属性的名称。
  • transition-duration: 定义过渡效果花费的时间,默认是 0。
  • transition-timing-function: 规定过渡效果的时间曲线,默认是ease
  • transition-delay: 规定过渡效果何时开始,默认是 0。
<div id="t10"></div>
<style type="text/css">
    #t10{
        height: 100px;
        width: 100px;
        border: 1px solid #eee;
        background: red;
        transition: all .5s;
    }
    #t10:hover{
        height: 100px;
        width: 100px;
        border: 1px solid #eee;
        background: yellow;
        transition: all .5s;
    }
</style>

Flex布局

通过指定display: flex来标识一个弹性布局盒子,称为FLEX容器,容器内部的盒子就成为FLEX容器的成员,容器默认两根轴线,水平的主轴与垂直的交叉轴,主轴的开始位置叫做main start,结束位置叫做main end;交叉轴的开始位置叫做cross start,结束位置叫做cross end,容器成员默认按照主轴排列。

https://github.com/WindrunnerMax/EveryDay/blob/master/CSS/Flex布局.md

Grid布局

通过指定display: grid;指定容器使用Grid布局,Grid布局中采用网格布局的区域,称为容器,容器内部采用网格定位的子元素,称为成员。容器中水平区域称为行,垂直区域称为列,可以将其看作二位数组。划分网格的线就称为网格线,正常情况下n行有n + 1根水平网格线,m列有m + 1根垂直网格线。注意当容器设置为Grid布局以后,容器子元素的floatdisplay: inline-blockdisplay: table-cellvertical-aligncolumn-*等设置都将失效。

https://github.com/WindrunnerMax/EveryDay/blob/master/CSS/Grid布局.md

多列布局

CSS3可以将文本内容设计成像报纸一样的多列布局。

  • column-count: 指定元素应该被分割的列数。
  • column-fill: 指定如何填充列。
  • column-gap: 指定列与列之间的间隙。
  • column-rule: 所有column-rule-*属性的简写。
  • column-rule-color: 指定两列间边框的颜色。
  • column-rule-style: 指定两列间边框的样式。
  • column-rule-width: 指定两列间边框的厚度。
  • column-span: 指定元素要跨越多少列。
  • column-width: 指定列的宽度。
  • columns: 设置column-widthcolumn-count的简写。
<div id="t11">多列布局示例</div>
<style type="text/css">
    #t11{
        height: 100px;
        width: 100px;
        border: 1px solid #eee;
        column-count: 3;
        column-gap: 20px;
    }
</style>

用户界面

CSS3中增加了一些新的用户界面特性来调整元素尺寸,框尺寸和外边框。

  • appearance: 允许使一个元素的外观像一个标准的用户界面元素。
  • box-sizing: 允许以适应区域而用某种方式定义某些元素。
  • icon: 为创作者提供了将元素设置为图标等价物的能力。
  • nav-down: 指定在何处使用箭头向下导航键时进行导航。
  • nav-index: 指定一个元素的Tab的顺序。
  • nav-left: 指定在何处使用左侧的箭头导航键进行导航。
  • nav-right: 指定在何处使用右侧的箭头导航键进行导航。
  • nav-up: 指定在何处使用箭头向上导航键时进行导航。
  • outline-offset: 外轮廓修饰并绘制超出边框的边缘。
  • resize: 指定一个元素是否是由用户调整大小。
<div id="t12"></div>
<style type="text/css">
    #t12{
        height: 100px;
        width: 100px;
        border: 1px solid #eee;
        resize:both;
        overflow:auto;
    }
</style>

滤镜

CSS3filter属性可支持对于网页进行各种滤镜效果。
filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();

<div id="t13"></div>
<style type="text/css">
    #t13{
        height: 100px;
        width: 100px;
        border: 1px solid #eee;
        filter: blur(3px);
        background-color: blue;
    }
</style>

选择器

  • element1~element2: 选择同级前面有element1元素的全部element2元素
  • [attribute^=value]: 选择attribute属性中以value开头的元素
  • [attribute$=value]: 选择attribute属性中以value结尾的元素
  • [attribute*=value]: 选择attribute属性中包含value字符串的元素
  • div:first-child: 选择属于其父元素的第一个子元素的每个div元素
  • div:last-child: 选择属于其父元素最后一个子元素的每个div元素
  • div:nth-child(n): 选择属于其父元素的第n个子元素的每个div元素
  • div:nth-last-child(n): 同上,从这个元素的最后一个子元素开始算
  • div:nth-of-type(n): 选择属于其父元素第n个div元素的每个div元素
  • div:nth-last-of-type(n): 同上,但是从最后一个子元素开始计数
  • div:first-of-type: 选择属于其父元素的首个div元素的每个div元素
  • div:last-of-type: 选择属于其父元素的最后div元素的每个div元素
  • div:only-child: 选择属于其父元素的唯一子元素的每个div元素
  • div:only-of-type: 选择属于其父元素唯一的div元素的每个div元素
  • :root: 选择文档的根元素
  • :empty: 选择的元素里面没有任何内容
  • :checked: 匹配被选中的input元素,这个input元素包括radio和checkbox
  • :default: 匹配默认选中的元素,例如:提交按钮总是表单的默认按钮
  • :disabled: 匹配禁用的表单元素
  • :enabled: 匹配没有设置disabled属性的表单元素
  • :valid: 匹配条件验证正确的表单元素

媒体查询

可以针对不同的媒体类型设置不同的样式规则,可以根据视窗、设备高度与宽度、设备方向、分辨率等进行不同CSS适配。

<div id="t14"></div>
<style type="text/css">
    @media screen and (min-width:600px){ 
        #t14{
            height: 100px;
            width: 100px;
            border: 1px solid #eee;
            background: red;
            transition: all .5s;
        }
    }
    @media screen and (max-width:600px) { 
        #t14{
            height: 100px;
            width: 100px;
            border: 1px solid #eee;
            background: yellow;
            transition: all .5s;
        }
    }
</style>

代码示例

<!DOCTYPE html>
<html>
<head>
    <title>CSS3新特性</title>
    <style type="text/css">
        div{
            margin: 10px 0;
            height: 100px;
            width: 100px;
            border: 1px solid #eee;
        }
        #t1{
            border-radius: 10px;
            background-color: blue;
        }
        #t2{
            box-shadow: 5px 5px 5px #aaa;
        }
        #t3{
            border: 1px solid #eee;
            background-image: url(https://blog.touchczy.top/favicon.ico);
            background-size:30px 30px;
            background-repeat:repeat;
            background-origin:content-box;
        }
        #t4{
            background-image: linear-gradient(to right,yellow);
        }
        #t5{
            color: #fff;
            text-shadow: -1px 3px 5px #333;
        }
        @font-face{
            font-family: ff;
            src: url(https://cdn.jsdelivr.net/gh/WindrunnerMax/Yolov3-Train@2d965d2/keras-yolo3/font/FiraMono-Medium.otf);
        }
        #t6{
            font-family:ff;
        }
        #t7{
            transform:rotate(10deg);
        }
        #t8{
            transform:rotateX(10deg);
        }
        @keyframes animation{
            from {background:red;}
            to {background:yellow;}
        }
        #t9{
            animation:animation 5s ease infinite alternate;
        }
        #t10{
            background: red;
            transition: all .5s;
        }
        #t10:hover{
            background: yellow;
            transition: all .5s;
        }
        #t11{
            column-count: 3;
            column-gap: 20px;
        }
        #t12{
            resize:both;
            overflow:auto;
        }
        #t13{
            filter: blur(3px);
            background-color: blue;
        }
        @media screen and (min-width:600px){ 
            #t14{
                height: 100px;
                width: 100px;
                border: 1px solid #eee;
                background: red;
                transition: all .5s;
            }
        }
        @media screen and (max-width:600px) { 
            #t14{
                height: 100px;
                width: 100px;
                border: 1px solid #eee;
                background: yellow;
                transition: all .5s;
            }
        }
    </style>
</head>
<body>
    <div id="t1">圆角</div>
    <div id="t2">盒阴影</div>
    <div id="t3">背景</div>
    <div id="t4">渐变</div>
    <div id="t5">文本效果</div>
    <div id="t6">FONT</div>
    <div id="t7">2D转换</div>
    <div id="t8">3D转换</div>
    <div id="t9">动画</div>
    <div id="t10">过渡</div>
    <div id="t11">多列布局示例</div>
    <div id="t12">用户界面</div>
    <div id="t13">滤镜</div>
    <div id="t14">媒体查询</div>

</body>
</html>

每日一题

https://github.com/WindrunnerMax/EveryDay

参考

https://www.jianshu.com/p/f988d438ee17
https://www.runoob.com/css3/css3-tutorial.html
https://developer.mozilla.org/zh-CN/docs/Archive/CSS3

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


Css常用的排序方式权重分配 排序方式: 1、按类型&#160;如,显示和浮动、定位、尺寸、字体等 2、按字母&#160;按字母顺序排列,优点是规则简单 3、按定义长度&#160;按照样式定义的字符长度排列 各有优劣,实际应用中,推荐使用第一种。&#160;但是如果单靠前端工程师在编写过程中这么做的
原文:https://www.cnblogs.com/wenruo/p/9732704.html 先上效果 基本是用CSS实现的,没有用图片,加一丢丢JS。不过没有考虑太多兼容性。 首先画一个 &lt;!DOCTYPE html&gt;&lt;html lang=&quot;en&quot;&gt;
css属性:word-wrap:break-word; 与 word-break:break-all 的用法; zhangq0123 于 2016-10-19 11:06:12 发布 6475 收藏 9分类专栏: CSS HTML 文章标签: html css版权 CSS同时被 2 个专栏收录8 篇
https://destiny001.gitee.io/color/
&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;&gt; &l
css之background的cover和contain的缩放背景图 对于这两个属性,官网是这样解释的: contain 此时会保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小。 等比例缩放图象到垂直或者水平其中一项填满区域。 cover 此时会保持图像的纵横比并将图像缩放成将完全覆盖背景
.CSS.MAP文件作用 https://blog.csdn.net/qq_36441169/article/details/102575563 1、简介在写前端代码,使用bootstrap时,发现同一个目录下,不仅仅有.css文件的同时,还存在.css.map文件的存在。在前端页面调试时也发现,映
Jquery mobile 写html时文字太长无法自动换行。 Jquery mobile 1 篇文章0 订阅 订阅专栏 加上这个 style=&quot;word-wrap:break-word;word-break:break-all;&quot; 或者 style=&quot;word-wra
详见:http://www.shagua.wiki/project/3 layui图标:http://www.shagua.wiki/project/3?p=85 JQ手册 :https://www.jc2182.com/jquery/jquery-jiaocheng.html css样式手册:ht
css里面圆形的代码,如何使用纯css实现圆形图像或叶子图像?(代码实例) 网易美学于&#160;2021-08-03 22:15:22&#160;发布946&#160;收藏 文章标签:&#160;css里面圆形的代码 有没有想过如何制作那些各式各样的圆形图像而无需用ps,本篇文章就来给你介绍一下如
css文字超出一行就显示省略号 1,css超出一行用点表示 white-space:nowrap; overflow:hidden; text-overflow:ellipsis; 2,css超出二行用点表示 overflow:hidden; text-overflow:ellipsis; disp
js动态追加数据单独设置某一个元素的样式。 在开发时,我们有很多数据是从后台获取然后展示的,例如列表,最近开发碰到个需求是获取到列表信息之后,不仅仅是拼接展示出来,还需要将其中的第一个li元素设置成其他的样式类,在网上找了一堆的办法都和自身业务需求不一致,没办法自己通过chrome控制台一点点调试,
css3手机端h5商品列表页,两列等分排列技巧 .picture_list {&#x9;width: 100%;&#x9;overflow: hidden}.picture_list&gt;li {&#x9;width: 50%; min-height: 120px;&#x9;float: left;&#x9;padding: 0px 3
css3 transform:scale(x)实现字体的缩放: css3 transform:scale(x)字体的缩放: transform:scale(x),针对于整体的缩放,缩放的整体包括宽,高,背景。这自然对于内联元素就无法使用此属性,最好使用无属性的span转换成块元素或者行内块元素进行设
jq获取第一个子元素并添加class &lt;div class=&quot;main&quot;&gt; &lt;div class=&quot;tit&quot;&gt;颜色&lt;/div&gt; &lt;ul&gt; &lt;li&gt;银色&lt;/li&gt; &lt;li&gt;深灰色
设置背景图片的两种方式,并解决手机端背景图片高度自适应问题 赵世婷&#160;2017-09-19 15:59:43 14372 收藏&#160;5 1 设置背景图片的两种方式: 方式一: .back{undefinedposition: fixed;width: 100%;height: 100%
css层级选择器理论{#ek) E:first-child : 匹配的是E元素,E元素是父元素的第一个子元素 说明:利用 :first-child 这个伪类,只有当元素是另一个元素的第一个子元素时才能匹配。例如,p:first-child 会选择作为另外某个元素第一个子元素的所有 p 元素。一般可能
Css多行字符截取方法详解 时间:2021-07-01 10:21:17 相信有很多同学在写前端页面的时候,都会遇到字符长了需要截取的问题,最简单的方法就是手动去截取,可这样又感觉太low了,今天晚上就来讲讲利用css进行字符的截取,不了解css是如何截取的同学可以和我们一起看看哦! 前言 最近在做
css中content可以用到的字符编码 项目中用到的一些特殊字符和图标 html代码 &lt;div class=&quot;cross&quot;&gt;&lt;/div&gt; css代码.cross{width: 20px;height: 20px;border-radius: 10px;b
CSS 计算属性 calc()的完整指南(上) 2020-05-03 CSS tricks上有一系列的完整指南文章,我后面会翻译这些内容,更新不会一下子完成,而是会分成几个,防止自己因看到文章过长而放弃翻译,一步一个脚印。 CSS有一个特殊的calc()函数,用于做基本的数学运算。下面是一个例子: