【CSS】8.CSS3新特性（二）

最新推荐文章于 2024-07-21 19:13:42 发布
最新推荐文章于 2024-07-21 19:13:42 发布
阅读量64 收藏
点赞数
分类专栏： CSS学习笔记 文章标签： css css3 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46293452/article/details/129875292
版权

3. CSS3 的变形

3.1 CSS3 用 border-radius 画圆形

border-radius 的优点

  1. 减少网站的维护工作量
  2. 提高网站性能
  3. 增加了视觉美观性
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>border-radius</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            border: 1px solid #ccc;
            background-color: #f66;
            margin: 50px auto;
        }

        .demo01 {
            border-radius: 50%;
        }

        .demo02 {
            border-radius: 100px 100px 100px 100px;
        }

        .demo03 {
            border-top-left-radius: 50%;
            border-top-right-radius: 50%;
            border-bottom-left-radius: 50%;
            border-bottom-right-radius: 50%;
        }

        .demo04 {
            border-top-left-radius: 100px;
            border-top-left-radius: 100px;
            border-top-right-radius: 100px;
            border-bottom-left-radius: 100px;
            border-bottom-right-radius: 100px;
        }

        .demo05 {
            border-top-left-radius: 50px 50px;
        }

        .demo06 {
            width: 100px;
            border-radius: 100px 0px 0px 100px;
        }

        .demo07 {
            height: 100px;
            border-radius: 100px 100px 0px 0px;
        }
    </style>
</head>
<body>
    <div class="demo01">div1</div>
    <div class="demo02">div2</div>
    <div class="demo03">div3</div>
    <div class="demo04">div4</div>
    <div class="demo05">div5</div>
    <div class="demo06">div6</div>
    <div class="demo07">div7</div>
</body>
</html>

在这里插入图片描述

3.2 CSS3 画三角形和对话框

3.2.1 画三角形

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>画三角形</title>
    <link rel="stylesheet" href="./style1.css">
</head>
<body>
    <div class="triangle1"></div>
    <div class="triangle2"></div>
    <div class="triangle3"></div>
    <div class="triangle4"></div>
    <div class="triangle5"></div>
</body>
</html>

CSS 通过设置 border-top、border-left、border-bottom、border-right 来画三角形

div {
    width: 0px;
    height: 0px;
    margin: 50px auto;
}

.triangle1 {
    border-top: 50px solid red;
    border-left: 50px solid green;
    border-bottom: 50px solid blue;
    border-right: 50px solid yellow;
}

.triangle2 {
    border-top: 50px solid red;
    border-left: 50px solid transparent;
    border-bottom: 50px solid transparent;
    border-right: 50px solid transparent;
}

.triangle3 {
    border-top: 50px solid transparent;
    border-left: 50px solid green;
    border-bottom: 50px solid transparent;
    border-right: 50px solid transparent;
}

.triangle4 {
    border-top: 50px solid transparent;
    border-left: 50px solid transparent;
    border-bottom: 50px solid blue;
    border-right: 50px solid transparent;
}

.triangle5 {
    border-top: 50px solid transparent;
    border-left: 50px solid transparent;
    border-bottom: 50px solid transparent;
    border-right: 50px solid yellow;
}

在这里插入图片描述

3.2.2 画对话框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Diglog</title>
    <link rel="stylesheet" href="./style2.css">
</head>
<body>
    <div class="diglog">Hello Everyone,I'm ygh!</div>
</body>
</html>

CSS 通过 目标元素::before 伪元素 加上设置border-top、border-left、border-bottom、border-right 来画三角形

.diglog {
    background-color: #6A6;
    margin: 50px auto;
    width: 300px;
    height: 25px;
    line-height: 25px;
    padding: 10px;
    border-radius: 6px;
    color: #fff;
    /* 相对定位 */
    position: relative;
}

.diglog::before {
    content: '';
    border-left: 0px solid #6A6;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-right: 10px solid #6A6;
    /* 绝对定位 */
    position: absolute;
    left: -10px;
    top: 14px;
}

在这里插入图片描述

3.3 CSS3 画菱形和平行四边形

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Transform</title>
    <link rel="stylesheet" href="./style3.css">
</head>
<body>
    <div class="diamond"></div>
    <div class="parallel"></div>
    <div class="parallel1"></div>
    <div class="parallel2"></div>
</body>
</html>

CSS 的 transform 属性 倾斜(skew)，以此来将盒子设置成菱形和平行四边形

.diamond {
    width: 200px;
    height: 200px;
    background-color: #6a6;
    margin: 100px auto;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
}

.parallel {
    width: 200px;
    height: 100px;
    background-color: #6a6;
    margin: 100px auto;
    -webkit-transform: skew(20deg);
    -moz-transform: skew(20deg);
    -ms-transform: skew(20deg);
    -o-transform: skew(20deg);
    transform: skew(20deg);
}

.parallel1 {
    width: 200px;
    height: 100px;
    background-color: #6a6;
    margin: 100px auto;
    -webkit-transform: skew(0deg, 20deg);
    -moz-transform: skew(0deg, 20deg);
    -ms-transform: skew(0deg, 20deg);
    -o-transform: skew(0deg, 20deg);
    transform: skew(0deg, 20deg);
}

.parallel2 {
    width: 200px;
    height: 100px;
    background-color: #6a6;
    margin: 100px auto;
    -webkit-transform: skew(20deg, 20deg);
    -moz-transform: skew(20deg, 20deg);
    -ms-transform: skew(20deg, 20deg);
    -o-transform: skew(20deg, 20deg);
    transform: skew(20deg, 20deg);
}

在这里插入图片描述

3.4 CSS3 画五角星和六角星

3.4.1 画五角星

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>star</title>
    <link rel="stylesheet" href="./style4.css">
</head>
<body>
    <div id="star"></div>
</body>
</html>

CSS　通过画三个三角形来画五角星，transform　的　rotate（旋转）和在三角形的基础上用　::before　和　::after　向元素逻辑上的头部或尾部添加相应的三角形

#star {
    width: 0px;
    height: 0px;
    border-bottom: 70px solid red;
    border-left: 100px solid transparent;
    border-right: 100px solid transparent;
    margin: 150px auto;
    -webkit-transform: rotate(35deg);
    -ms-transform: rotate(35deg);
    -o-transform: rotate(35deg);
    transform: rotate(35deg);
    /* 定位，方便后面的伪元素定位 */
    position: relative;
}

#star::before {
    content: '';
    width: 0px;
    height: 0px;
    border-bottom: 80px solid red;
    border-left: 30px solid transparent;
    border-right: 30px solid transparent;
    position: absolute;
    -webkit-transform: rotate(-35deg);
    -ms-transform: rotate(-35deg);
    -o-transform: rotate(-35deg);
    transform: rotate(-35deg);
    top: -45px;
    left: -65px; 
}

#star::after {
    content: '';
    position: absolute;
    border-bottom: 70px solid red;
    border-left: 100px solid transparent;
    border-right: 100px solid transparent;
    -webkit-transform: rotate(-70deg);
    -ms-transform: rotate(-70deg);
    -o-transform: rotate(-70deg);
    transform: rotate(-70deg);
    top: 3px;
    left: -105px;
}

在这里插入图片描述

3.4.2 画六角星

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>star</title>
    <link rel="stylesheet" href="./style5.css">
</head>
<body>
    <div id="star"></div>
</body>
</html>

CSS　通过设置两个三角形来画六角形，一个正放，另一个倒置

#star {
    width: 0px;
    height: 0px;
    border-bottom: 100px solid red;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    margin: 100px auto;
    position: relative;
}

#star::after {
    content: '';
    width: 0px;
    height: 0px;
    border-top: 100px solid red;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    position: absolute;
    top: 30px;
    left: -50px;
}

在这里插入图片描述

3.5 CSS3 画五角形和六角形

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>shape</title>
    <link rel="stylesheet" href="./style6.css">
</head>
<body>
    <div id="shape"></div>
    <div id="pentagon"></div>
    <div id="hexagon"></div>
</body>
</html>

通过平行四边形和三角形来画五边形
通过长方形和两个三角形来画六边形

#shape {
    width: 50px;
    height: 50px;
    border-top: 50px solid #F00;
    border-left: 50px solid #0F0;
    border-right: 50px solid #00F;
    border-bottom: 50px solid #FF0;
}

#pentagon {
    margin: 100px auto;
    width: 54px;
    height: 0px;
    border-top: 50px solid red;
    border-left: 18px solid transparent;
    border-right: 18px solid transparent;
    position: relative;
}

#pentagon::after {
    content: '';
    position: absolute;
    width: 0px;
    height: 0px;
    border-bottom: 35px solid red;
    border-left: 45px solid transparent;
    border-right: 45px solid transparent;
    top: -84px;
    left: -18px;
}

#hexagon {
    margin: 100px auto;
    width: 100px;
    height: 55px;
    background-color: red;
    position: relative;
}

#hexagon::before {
    content: '';
    position: absolute;
    width: 0px;
    height: 0px;
    border-bottom: 25px solid blue;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    top: -24px;
}

#hexagon::after {
    content: '';
    position: absolute;
    width: 0px;
    height: 0px;
    border-top: 25px solid blue;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    top: 55px;
}

3.6 CSS3 画心形和蛋形

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>heart</title>
    <link rel="stylesheet" href="./style7.css">
</head>
<body>
    <div id="heart"></div>
    <div id="egg"></div>
</body>
</html>

心形通过两个长方形来设置不规则的形状
蛋形通过一个圆来设置不规则的形状

#heart {
    width: 100px;
    height: 90px;
    position: relative;
    margin: 100px auto;
    background-color: #FF0;
}

#heart::before {
    content: '';
    position: absolute;
    width: 50px;
    height: 80px;
    background-color: red;
    border-radius: 50px 40px 0px 0px;
    -webkit-transform-origin: 0 100%;
    -moz-transform-origin: 0 100%;
    -ms-transform-origin: 0 100%;
    -o-transform-origin: 0 100%;
    transform-origin: 0 100%;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
    left: 50px;
}

#heart::after {
    content: '';
    position: absolute;
    width: 50px;
    height: 80px;
    background-color: red;
    border-radius: 40px 50px 0px 0px;
    -webkit-transform-origin: 100% 100%;
    -moz-transform-origin: 100% 100%;
    -ms-transform-origin: 100% 100%;
    -o-transform-origin: 100% 100%;
    transform-origin: 100% 100%;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
}

#egg {
    width: 126px;
    height: 180px;
    background-color: #fa3;
    margin: 100px auto;
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
}

在这里插入图片描述

3.7 CSS3 画太极阴阳图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>画阴阳图</title>
    <link rel="stylesheet" href="./style8.css">
</head>
<body>
    <div id="taiji"></div>
</body>
</html>

CSS 先画一个大圆，背景颜色为白色，将左边框设为跟总宽度一样
加入两个小圆，背景颜色为白色、黑色，白色将边框设为黑色，另一个黑色为白色

body {
    background-color: #ccc;
}

#taiji {
    width: 150px;
    height: 300px;
    margin: 100px auto;
    border-radius: 50%;
    background-color: white;
    border-left: 150px solid black;
    position: relative;
}

#taiji::before {
    content: '';
    position: absolute;
    width: 0px;
    height: 0px;
    padding: 25px;
    border-radius: 50%;
    border: 50px solid black;
    background-color: white;
    left: -75px;
    top: 0px;
}

#taiji::after {
    content: '';
    position: absolute;
    width: 0px;
    height: 0px;
    padding: 25px;
    border-radius: 50%;
    background-color: black;
    border: 50px solid white;
    left: -75px;
    bottom: 0px;
}

在这里插入图片描述
GitHub代码
gitee代码

ich&du
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS盒子模型
laisy334514的博客
08-06 315
1.边框 1.border-width ---- 粗细 2.border-style ---- 样式 1.none 2.solid ---- 实线 3.double ---- 双实线 4.dashed ---- 虚线 5.dotted ---- 点线 ...
【css】CSS3有哪些新特性
热门推荐
t13965688123的博客
05-07 1万+
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录前言1、css3边框——圆角效果 border-radius2、css3边框——阴影 box-shadow3、css3边框——边框图片 border-image4、css3颜色——颜色之RGBA5、css3颜色——渐变色彩 liner-gradient线性渐变6、CSS3文字与字体——text-overflow与word-wrap7、CSS3文字与字体——@font-face 字体8、CSS3文字与字体——文本的阴影 text-s.
CSS3有哪些新特性
admin_zlj的博客
03-20 1万+
CSS3的新特性 1.CSS3是CSS2.1的一个升级版，它是对CSS的一个扩展。 2.CSS3的主要新特性： 1）选择器 2）阴影 3）形状转换（2D <-> 3D） 4）变形 5）动画（过渡动画、帧动画） 6）边框 7）多重背景 8）反射 9）文字 10）颜色函数（rgba/hsl/hsla） 11）滤镜（filter） 12）弹性布局 13）多列布局 14）栅格布局 15）盒模型 16）Web字体 17）媒体查询 3.CSS3不是属于浏览器或同一浏览器的不同版本都支持，所以需要兼容处理，通
2. CSS3的新特性
m0_74891783的博客
07-13 3584
css3的新特性
CSS3新增了哪些新特性？
u012138854的博客
11-07 5008
即层叠样式表（Cascading Style Sheets）的简称，是一种标记语言，由浏览器解释执行用来使页面变得更美观。动画这个平常用的也很多，主要是做一个预设的动画。和一些页面交互的动画效果，结果和过渡应该一样，让页面不会那么生硬。background-size属性常用来调整背景图片的大小，主要用于设定图片本身。通常情况，背景都是覆盖整个元素的，利用这个属性可以设定背景颜色或图片的覆盖范围。能够规定水平阴影、垂直阴影、模糊距离，以及阴影的颜色。当我们设置背景图片时，图片是会以左上角对齐，但是是以。
HTML5&CSS3新特性
weixin_52972575的博客
05-05 8133
一.HTML5新特性 HTML5新特性针对于以前的不足，增加了一些新的标签，新的表单，新的表单属性等。 1.新增语义化标签 新增的带有语义化的标签 二.CSS3新特性
h5和css3新特性
msn131420的博客
02-25 2293
一、HTML5 的新特性 1.新增语义化标签 HTML5 的新增特性主要是针对于以前的不足，增加了一些新的标签、新的表单和新的表单属性等。 这些新特性都有兼容性问题，基本是 **IE9+ 以上版本的浏览器**才支持，如果不考虑兼容性问题，可以大量使用这些新特性。 注意：只需要关注开发常用的新特性即可。 以前布局，我们基本用 div 来做。div 对于搜索引擎来说，是没有语义的 <div class=“header”> </div> <div class=“nav”&.
CSS3新特性
王工头的博客
01-24 8107
CSS3新特性 欢迎访问我的博客https://qqqww.com/，祝所有码农同胞们早日走上人生巅峰，迎娶白富美~~ 声明：本文参考 W3C CSS3 教程、菜鸟教程等，详细移步 W3C 或菜鸟教程 用 CSS3 做过一些小动画，很好用，特别是里面一些新特性，都是 CSS2 不可比拟的，这里整理一些出来，当做笔记，也当做教程，共勉！ CSS3 相比 CSS 2 对边框、背景、渐变、...
11.CSS3新增了哪些新特性？
kleinBlue.的博客
11-07 3033
一、是什么 css，即层叠样式表（Cascading Style Sheets）的简称，是一种标记语言，由浏览器解释执行用来使页面变得更为美观 css3是css的最新标准，是向后兼容的，CSS1/2的特性在CSS3里都是可以使用的 CSS3也增加了很多新特性，为开发者带来了更佳的开发体验 从几个维度列举一些常见的特性，如下 二、选择器 css3中新增了一些选择器，主要为如下图所示： 三、新样式 边框 css3新增了三个边框属性，分别是： border-radius：创建圆...
HTML5和CSS3新特性
这个世界上有各种各样的人.
05-12 1830
<header>：描述了⽂档的头部区域，于定义内容的介绍展⽰区域。 <nav>：定义导航链接的部分。 <section>：定义⽂档中的节（section、区段）。比如章节、页眉、页脚或⽂档中的其他部分，section通常 包含了⼀组内容及其标题。 <article>：定义独⽴的内容。 <aside>：定义页⾯主区域内容之外的内容（⽐如侧边栏）。 <figure>：标签规定独⽴的流内容（图像、图表、照⽚、代码等等）。 <figcaption>：定义 <figure>元素的标题。 <main>:main元素
css3新特性.png
03-17
CSS3新特性，带你一小时学完CSS3
1.07 css3新特性
10-07
本资源摘要信息主要介绍CSS3的新特性，包括CSS3的介绍、CSS3选择器、CSS3文本、CSS3边框、CSS3背景、CSS3颜色、CSS3渐变、CSS3盒模型等。 CSS3介绍 CSS3是CSS（层叠样式表）技术的升级版本，于1999年开始制订，...
深入了解CSS3新特性
02-26
这些CSS新特性在现阶段可以说都是非常强大和完善的，您只需要加入几行简单的CSS代码便可以实现出一系列令人眼前一亮的效果，这比我们之前用JavaScript去模拟这样的效果要好得多，不仅降低了复杂度，变得易维护，在...
Web开发：四角线框效果（HTML、CSS、JavaScript）
m0_65029152的博客
07-17 899
本文主要记录前端给图片动态添加四角线框的相关内容和实现过程；
CSS实现从上往下过渡效果
Rverdoser的博客
07-18 214
属性改变时（即鼠标悬停时），它会在0.5秒内完成平滑的从上往下移动50像素的变化。要在CSS中实现一个从上往下的过渡效果，你可以使用。类定义了一个方框，并指定了一个过渡效果，使得当。
CSS 技巧与案例详解：开篇介绍
粉丝们务必加入微信粉丝群
07-14 4206
本系列文章分为多个部分，每个部分都详细解析了CSS的各种实用技巧和经典案例。CSS 单位速查表 & 自定义引用标记 & 重置所有样式：了解常见CSS单位，并学习如何创建自定义的引用标记和重置样式表。隐藏空元素 & 完美的嵌套边框圆角 & 排版比例基础知识：掌握隐藏元素的方法，实现嵌套圆角边框，以及排版比例的基本概念。自定义文本选择 & 流式排版：定制文本选择的样式，探索流式排版的奥秘。为什么line-height是无单位的 & 兄弟元素淡出效果 & 蚀刻文字效果。
css性能优化的方法
最新发布
jht_520的博客
07-21 106
避免使用过多的动画和过渡效果：过多的动画和过渡效果会占用更多的 CPU 和内存资源，降低性能。以上是一些常见的 CSS 性能优化方法，具体的优化策略和技巧还需要根据具体的项目和需求来确定。避免嵌套和选择器冗余：尽量避免使用过多的嵌套和冗余的选择器，这会增加解析和匹配的时间。使用标准字体：使用浏览器默认的字体，而不是使用自定义字体文件，可以减少请求和文件大小。），会消耗更多的性能。避免使用昂贵的选择器：某些选择器，如后代选择器和通用选择器（使用缩写和简写属性：尽量使用简写属性来减少代码量，例如使用。
拖拽上传（预览图片）
喵喵的博客
07-18 536
/创建一个url的blob ，在当前会话下生效，不像base64那样在哪里都能用，如在浏览器中用，当你关掉浏览器再开浏览器用则不生效，是一种临时文件。/* 触发file类型的Input上传文件不一定要点击上传按钮，点在Input身上即可 */点击+上传图片，或直接拖拽图片到红色方框里面也可上传图片，上传后预览图片。//拿到input当前上传的文件，拿不到url，想在页面展示必须有url。//通过FileReader的result可以拿到文件的url。//生成一个临时地址blob，不可持续。
Web前端-Web开发CSS基础7-网格
a15735748145a的博客
07-17 765
22. 在网格容器中，设置grid-template-areas: 'header header header header' 'left left right right' 'left left right right' 'footer footer footer footer'19. 在网格容器中，设置grid-template-areas: 'header header header' 'main main main' 'footer footer footer'grid-row-start: 2;
探索CSS3：新特性与实战教程
"CSS3教程和css3新特性专题" CSS3是层叠样式表（Cascading Style Sheets）的第三个主要版本，它引入了一系列的新特性，极大地扩展了网页设计的可能性。CSS3不仅提供了更加丰富的样式控制，还允许设计师实现更复杂的...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值