css之“css3的新特性”

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>/*1.圆角边框*//*2.多重背景*//*3.渐变*//*4.RGBA*//*5.文字和盒子阴影*//*6.文本溢出、整字换行、换行规则以及书写模式*//*7.2D 3D转换*//*8.过渡*//*9.动画*//*10.css变量*//*11.多列*//*12.fel*//*13.媒体查询*//*14.盒模型*/*{box-sizing: border-box;margin: 0;padding: 0;}.div-a{width: 500px;height: 400px;border: 1px solid red;border-radius: 5px;background: url("./images/flower.gif") right bottom no-repeat,url("./images/paper.jpg")left bottom repeat;box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);text-shadow: 2px 2px 4px #000000;}.div-b{width: 200px;height: 100px;margin-top: 50px;background-image: linear-gradient(140deg,#EADEDB 0%,#BC70A4 50%,#BFD641 75%);}.div-c{width: 100px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}.div-d{width: 200px;height: 100px;transition: all 0.5s;background: rgba(0,0,0,0.2);}.div-d:hover{transform: translate(50px,50px);}.div-e{width: 200px;height: 100px;background: rgba(0,0,0,0.2);}@-webkit-keyframes myanimationB {0%{background: red}25%{background: yellow}50%{background: blue}75%{background: green}100%{background: rebeccapurple}}.div-e:hover{color: red;/*简写*/animation:myanimationB 1s 1s ease infinite alternate;/*动画的名字，播放时间，延时时间，动画效果，播放次数，播放顺序*/}:root{/*全局定义*/--blue: #1e90ff;--white: #ffffff;--red:red;}.div-f{/*column-count: 3; !*规定元素应被划分的列数*!*//*column-width: 50px;!*列指定建议的最佳宽度*!*/columns: 3 100px;/*简写*//*column-rule-style: solid;!*列之间的规则样式*!*//*column-rule-color: lightblue;!*列之间的颜色*!*//*column-rule-width: 1px;!*列之间的规则宽度*!*/column-rule: 1px solid lightblue;/*简写*/column-gap: 40px;/*列之间的间隙*/}.div-g{width: 600px;height: 500px;background: #333333;display: flex;justify-content: center;align-items: center;}.div-g>p{width: 100px;height: 100px;background: #BC70A4;}.div-l{width: 100px;height: 100px;border: 1px solid red;padding: 20px;/*浏览器显示的宽度为142，因为盒模型,可以使用box-sizing*/box-sizing: border-box;/*这样总宽度就为100了*/}@media screen and (max-width: 450px){.div-l{background: var(--red);}}</style>
</head>
<body><div class="div-a">css3的新特性</div><div class="div-b"></div><div class="div-c">文本溢出，文本不会换行，文本会在在同一行上继续,内容会被修剪，并且其余内容是不可见的</div><div class="div-d"></div><div class="div-e">动画</div><div class="div-f">话说天下大势，分久必合，合久必分：周末七国分争，并入于秦；及秦灭之后，楚、汉分争，又并入于汉；汉朝自高祖斩白蛇而起义，一统天下，后来光武中兴，传至献帝，遂分为三国。推其致乱之由，殆始于桓、灵二帝。桓帝禁锢善类，崇信宦官。及桓帝崩，灵帝即位，大将军窦武、太傅陈蕃，共相辅佐；时有宦官曹节等弄权，窦武、陈蕃谋诛之，机事不密，反为所害，中涓自此愈横。建宁二年四月望日，帝御温德殿。方升座，殿角狂风骤起，只见一条大青蛇，从梁上飞将下来，蟠于椅上。帝惊倒，左右急救入宫，百官俱奔避。须臾，蛇不见了。忽然大雷大雨，加以冰雹，落到半夜方止，坏却房屋无数。建宁四年二月，洛阳地震；又海水泛溢，沿海居民，尽被大浪卷入海中。光和元年，雌鸡化雄。六月朔，黑气十馀丈，飞入温德殿中。秋七月，有虹现于玉堂，五原山岸，尽皆崩裂。种种不祥，非止一端。帝下诏问群臣以灾异之由，议郎蔡邕上疏，以为蜺堕鸡化，乃妇寺干政之所致，言颇切直。帝览奏叹息，因起更衣。曹节在后窃视，悉宣告左右；遂以他事陷邕于罪，放归田里。后张让、赵忠、封谞、段珪、曹节、侯览、蹇硕、程旷、夏恽、郭胜十人朋比为奸，号为“十常侍”。帝尊信张让，呼为“阿父”。朝政日非，以致天下人心思乱，盗贼蜂起</div><div class="div-g"><p></p></div><div class="div-l">盒子模型</div></body>
</html>

css之“css3的新特性”相关推荐

HTML5与CSS3的新特性。
HTML5与CSS3的新特性 1.HTML5新特性 1.1.新特性的兼容问题 HTML5的新增特性主要是针对以前的不足,增加了一些新的标签.新的表单和新的表单属性等. 这些新特性都有兼容性问题,基本是 ...
重温CSS3常见新特性的奥秘（个人总结）
最近觉得CSS3真的很神奇,完全掌握了用的时候真的非常有趣,但是就是用的时候很难用好,所以我就整理了一下关于CSS3的新特性,也方便自己查阅,要是文章中有什么不对的或者更好的方法,欢迎大家指出~ tr ...
CSS3 渐变新特性和HTML5 Canvas画布背景渐变实现方法详解
CSS3 渐变新特性和HTML5 Canvas画布背景渐变实现方法详解大家好,又见面了,感觉我上一篇博客对部分同学都挺有帮助的,于是我决定继续写下去,会继续的解析知识点让大家更容易理解,希望能给大家 ...
跟着pink老师学前端之HTML5和CSS3的新特性
文章目录 1. HTML5新特性 1.1 HTML5新增的语义化标签 1.2 HTML5新增的多媒体标签 1. 视频< video> 2. 音频< audio> 1.3 HTM ...
HTML5和CSS3的新特性(浓缩好记版)
综述:这个问题在面试的时候经常被问到,有必要做一个总结,理解的深刻充分一些 1.html5的新特性?(记住有九大模块内容) 添加了video,radio标签添加了canvas画布和svg,渲染矢量图 ...
html5,css3,es6新特性总结
html5新特性语义化标签如:header,footer,nav,dialog 增强型表单如:date,week,url,time,email,month 视频和音频 audio和video C ...
关于CSS3的新特性（面试经典）
1.过渡属性 transition: 要改变的属性,花费时间,效果曲线(默认ease),延迟时间(默认0) 2.动画属性 animation:动画名称,一个周期花费时间,运动曲线(默认ease),动画 ...
HTML5 和 CSS3 的新特性--HTML5 的新特性
HTML5 的新增特性主要是针对于以前的不足,增加了一些新的标签.新的表单和新的表单属性等. 这些新特性都有兼容性问题,基本是 IE9+ 以上版本的浏览器才支持,如果不考虑兼容性问题,可以大量使用这 ...
CSS/CSS3语法新特性笔记
Python微信订餐小程序课程视频 https://edu.csdn.net/course/detail/36074 Python实战量化交易理财系统 https://edu.csdn.net/cou ...

css之“css3的新特性”

css之“css3的新特性”相关推荐

最新文章

热门文章