css构建shape

最新推荐文章于 2024-08-05 18:36:07 发布
最新推荐文章于 2024-08-05 18:36:07 发布
阅读量191 收藏
点赞数
分类专栏： CSS 文章标签： css shape

在这里插入图片描述

文章目录

square

        .square {
            width: 100px;
            height: 100px;
            background: red;
        }

rectangle

        .rectangle {
            width: 200px;
            height: 100px;
            background: red;
        }

circle

        .circle {
            width: 100px;
            height: 100px;
            background: red;
            border-radius: 50%
        }

oval

​    .oval {
​            width: 200px;
​            height: 100px;
​            background: red;
​            border-radius: 100px / 50px;
​        }

triangle-up

​        .triangle-up {
​            width: 0;
​            height: 0;
​            border-left: 50px solid transparent;
​            border-right: 50px solid transparent;
​            border-bottom: 100px solid red;
​        }

triangle-down

​        .triangle-down {
​            width: 0;
​            height: 0;
​            border-left: 50px solid transparent;
​            border-right: 50px solid transparent;
​            border-top: 100px solid red;
​        }

triangle-left

​        .triangle-left {
​            width: 0;
​            height: 0;
​            border-top: 50px solid transparent;
​            border-right: 100px solid red;
​            border-bottom: 50px solid transparent;
​        }

​# triangle-righ

​        .triangle-right {
​            width: 0;
​            height: 0;
​            border-top: 50px solid transparent;
​            border-left: 100px solid red;
​            border-bottom: 50px solid transparent;
​        }

triangle-topleft

​        .triangle-topleft {
​            width: 0;
​            height: 0;
​            border-top: 100px solid red;
​            border-right: 100px solid transparent;
​        }

triangle-topright

​        .triangle-topright {
​            width: 0;
​            height: 0;
​            border-top: 100px solid red;
​            border-left: 100px solid transparent;
​        }

triangle-bottomleft

​        .triangle-bottomleft {
​            width: 0;
​            height: 0;
​            border-bottom: 100px solid red;
​            border-right: 100px solid transparent;
​        }

triangle-bottomright

​        . triangle-bottomright {
​            width: 0;
​            height: 0;
​            border-bottom: 100px solid red;
​            border-left: 100px solid transparent;
​        }

curvedarrow

​        . curvedarrow {
​            position: relative;
​            width: 0;
​            height: 0;
​            border-top: 9px solid transparent;
​            border-right: 9px solid red;
​            transform: rotate(10deg);
​        }
​        . curvedarrow:after {
​            content: "";
​            position: absolute;
​            border: 0 solid transparent;
​            border-top: 3px solid red;
​            border-radius: 20px 0 0 0;
​            top: -12px;
​            left: -9px;
​            width: 12px;
​            height: 12px;
​            transform: rotate(45deg);
​        }

trapezoid

​        . trapezoid {
​            border-bottom: 100px solid red;
​            border-left: 25px solid transparent;
​            border-right: 25px solid transparent;
​            height: 0;
​            width: 100px;
​        }

parallelogram

​        . parallelogram {
​            width: 150px;
​            height: 100px;
​            transform: skew(20deg);
​            background: red;
​        }

star-six

​        . star-six {
​            width: 0;
​            height: 0;
​            border-left: 50px solid transparent;
​            border-right: 50px solid transparent;
​            border-bottom: 100px solid red;
​            position: relative;
​        }
​        . star-six:after {
​            width: 0;
​            height: 0;
​            border-left: 50px solid transparent;
​            border-right: 50px solid transparent;
​            border-top: 100px solid red;
​            position: absolute;
​            content: "";
​            top: 30px;
​            left: -50px;
​        }

star-five

​        . star-five {
​            margin: 50px 0;
​            position: relative;
​            display: block;
​            color: red;
​            width: 0px;
​            height: 0px;
​            border-right: 100px solid transparent;
​            border-bottom: 70px solid red;
​            border-left: 100px solid transparent;
​            transform: rotate(35deg);
​        }
​        . star-five:before {
​            border-bottom: 80px solid red;
​            border-left: 30px solid transparent;
​            border-right: 30px solid transparent;
​            position: absolute;
​            height: 0;
​            width: 0;
​            top: -45px;
​            left: -65px;
​            display: block;
​            content: '';
​            transform: rotate(-35deg);
​        }
​        . star-five:after {
​            position: absolute;
​            display: block;
​            color: red;
​            top: 3px;
​            left: -105px;
​            width: 0px;
​            height: 0px;
​            border-right: 100px solid transparent;
​            border-bottom: 70px solid red;
​            border-left: 100px solid transparent;
​            transform: rotate(-70deg);
​            content: '';
​        }

pentagon

​        .pentagon {
​            position: relative;
​            top:30px;
​            width: 54px;
​            box-sizing: content-box;
​            border-width: 50px 18px 0;
​            border-style: solid;
​            border-color: red transparent;
​        }
​        .pentagon:before {
​            content: "";
​            position: absolute;
​            height: 0;
​            width: 0;
​            top: -85px;
​            left: -18px;
​            border-width: 0 45px 35px;
​            border-style: solid;
​            border-color: transparent transparent red;
​        }

hexagon

​        .hexagon {
​            width: 100px;
​            height: 55px;
​            top:30px;
​            background: red;
​            position: relative;
​        }
​        .hexagon:before {
​            content: "";
​            position: absolute;
​            top: -25px;
​            left: 0;
​            width: 0;
​            height: 0;
​            border-left: 50px solid transparent;
​            border-right: 50px solid transparent;
​            border-bottom: 25px solid red;
​        }
​        .hexagon:after {
​            content: "";
​            position: absolute;
​            bottom: -25px;
​            left: 0;
​            width: 0;
​            height: 0;
​            border-left: 50px solid transparent;
​            border-right: 50px solid transparent;
​            border-top: 25px solid red;
​        }

octagon

​        .octagon {
​            width: 100px;
​            height: 100px;
​            background: red;
​            position: relative;
​        }
​        .octagon:before {
​            content: "";
​            width: 100px;
​            height: 0;
​            position: absolute;
​            top: 0;
​            left: 0;
​            border-bottom: 29px solid red;
​            border-left: 29px solid # eee;
​            border-right: 29px solid # eee;
​        }
​        .octagon:after {
​            content: "";
​            width: 100px;
​            height: 0;
​            position: absolute;
​            bottom: 0;
​            left: 0;
​            border-top: 29px solid red;
​            border-left: 29px solid # eee;
​            border-right: 29px solid # eee;
​        }

heart

​        .heart {
​            position: relative;
​            width: 100px;
​            height: 90px;
​        }
​        .heart:before,
​        .heart:after {
​            position: absolute;
​            content: "";
​            left: 50px;
​            top: 0;
​            width: 50px;
​            height: 80px;
​            background: red;
​            border-radius: 50px 50px 0 0;
​            transform: rotate(-45deg);
​            transform-origin: 0 100%;
​        }
​        .heart:after {
​            left: 0;
​            transform: rotate(45deg);
​            transform-origin: 100% 100%;
​        }

infinity

​        .infinity {
​            position: relative;
​            width: 212px;
​            height: 100px;
​            box-sizing: content-box;
​        }
​        .infinity:before,
​        .infinity:after {
​            content: "";
​            box-sizing: content-box;
​            position: absolute;
​            top: 0;
​            left: 0;
​            width: 60px;
​            height: 60px;
​            border: 20px solid red;
​            border-radius: 50px 50px 0 50px;
​            transform: rotate(-45deg);
​        }
​        .infinity:after {
​            left: auto;
​            right: 0;
​            border-radius: 50px 50px 50px 0;
​            transform: rotate(45deg);
​        }

diamond

​        .diamond {
​            width: 0;
​            height: 0;
​            border: 50px solid transparent;
​            border-bottom-color: red;
​            position: relative;
​            top: -50px;
​        }
​        .diamond:after {
​            content: '';
​            position: absolute;
​            left: -50px;
​            top: 50px;
​            width: 0;
​            height: 0;
​            border: 50px solid transparent;
​            border-top-color: red;
​        }

diamond-shield

​        .diamond-shield {
​            width: 0;
​            height: 0;
​            border: 50px solid transparent;
​            border-bottom: 20px solid red;
​            position: relative;
​            top: -50px;
​        }
​        .diamond-shield:after {
​            content: '';
​            position: absolute;
​            left: -50px;
​            top: 20px;
​            width: 0;
​            height: 0;
​            border: 50px solid transparent;
​            border-top: 70px solid red;
​        }

diamond-narrow

​        .diamond-narrow {
​            width: 0;
​            height: 0;
​            border: 50px solid transparent;
​            border-bottom: 70px solid red;
​            position: relative;
​            top: -50px;
​        }
​        .diamond-narrow:after {
​            content: '';
​            position: absolute;
​            left: -50px;
​            top: 70px;
​            width: 0;
​            height: 0;
​            border: 50px solid transparent;
​            border-top: 70px solid red;
​        }

cut-diamond

​        .cut-diamond {
​            border-style: solid;
​            border-color: transparent transparent red transparent;
​            border-width: 0 25px 25px 25px;
​            height: 0;
​            width: 50px;
​            left: 30%;
​            box-sizing: content-box;
​            position: relative;
​            margin: 20px 0 50px 0;
​        }
​        .cut-diamond:after {
​            content: "";
​            position: absolute;
​            top: 25px;
​            left: -25px;
​            width: 0;
​            height: 0;
​            border-style: solid;
​            border-color: red transparent transparent transparent;
​            border-width: 70px 50px 0 50px;
​        }

egg

​        .egg {
​            display: block;
​            width: 126px;
​            height: 180px;
​            background-color: red;
​            border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
​        }

pacman

​        .pacman {
​            width: 0px;
​            height: 0px;
​            border-right: 60px solid transparent;
​            border-top: 60px solid red;
​            border-left: 60px solid red;
​            border-bottom: 60px solid red;
​            border-top-left-radius: 60px;
​            border-top-right-radius: 60px;
​            border-bottom-left-radius: 60px;
​            border-bottom-right-radius: 60px;
​        }

talkbubble

​        .talkbubble {
​            width: 120px;
​            height: 80px;
​            background: red;
​            position: relative;
​            -moz-border-radius: 10px;
​            -webkit-border-radius: 10px;
​            border-radius: 10px;
​        }
​        .talkbubble:before {
​            content: "";
​            position: absolute;
​            right: 100%;
​            top: 26px;
​            width: 0;
​            height: 0;
​            border-top: 13px solid transparent;
​            border-right: 26px solid red;
​            border-bottom: 13px solid transparent;
​        }

burst-12

​        .burst-12 {
​            background: red;
​            width: 80px;
​            height: 80px;
​            position: relative;
​            text-align: center;
​        }
​        .burst-12:before,
​        .burst-12:after {
​            content: "";
​            position: absolute;
​            top: 0;
​            left: 0;
​            height: 80px;
​            width: 80px;
​            background: red;
​        }
​        .burst-12:before {
​            transform: rotate(30deg);
​        }
​        .burst-12:after {
​            transform: rotate(60deg);
​        }

burst-8

​        .burst-8 {
​            background: red;
​            width: 80px;
​            height: 80px;
​            position: relative;
​            text-align: center;
​            transform: rotate(20deg);
​        }
​        .burst-8:before {
​            content: "";
​            position: absolute;
​            top: 0;
​            left: 0;
​            height: 80px;
​            width: 80px;
​            background: red;
​            transform: rotate(135deg);
​        }

yin-yang

​        .yin-yang {
​            width: 96px;
​            box-sizing: content-box;
​            height: 48px;
​            background: # eee;
​            border-color: red;
​            border-style: solid;
​            border-width: 2px 2px 50px 2px;
​            border-radius: 100%;
​            position: relative;
​        }
​        .yin-yang:before {
​            content: "";
​            position: absolute;
​            top: 50%;
​            left: 0;
​            background: # eee;
​            border: 18px solid red;
​            border-radius: 100%;
​            width: 12px;
​            height: 12px;
​            box-sizing: content-box;
​        }
​        .yin-yang:after {
​            content: "";
​            position: absolute;
​            top: 50%;
​            left: 50%;
​            background: red;
​            border: 18px solid # eee;
​            border-radius: 100%;
​            width: 12px;
​            height: 12px;
​            box-sizing: content-box;
​        }

badge-ribbon

​        .badge-ribbon {
​            position: relative;
​            background: red;
​            height: 100px;
​            width: 100px;
​            border-radius: 50px;
​        }
​        .badge-ribbon:before,
​        .badge-ribbon:after {
​            content: '';
​            position: absolute;
​            border-bottom: 70px solid red;
​            border-left: 40px solid transparent;
​            border-right: 40px solid transparent;
​            top: 70px;
​            left: -10px;
​            transform: rotate(-140deg);
​        }
​        .badge-ribbon:after {
​            left: auto;
​            right: -10px;
​            transform: rotate(140deg);
​        }

space-invader

​        .space-invader {
​            box-shadow: 0 0 0 1em red,
​            0 1em 0 1em red,
​            -2.5em 1.5em 0 .5em red,
​            2.5em 1.5em 0 .5em red,
​            -3em -3em 0 0 red,
​            3em -3em 0 0 red,
​            -2em -2em 0 0 red,
​            2em -2em 0 0 red,
​            -3em -1em 0 0 red,
​            -2em -1em 0 0 red,
​            2em -1em 0 0 red,
​            3em -1em 0 0 red,
​            -4em 0 0 0 red,
​            -3em 0 0 0 red,
​            3em 0 0 0 red,
​            4em 0 0 0 red,
​            -5em 1em 0 0 red,
​            -4em 1em 0 0 red,
​            4em 1em 0 0 red,
​            5em 1em 0 0 red,
​            -5em 2em 0 0 red,
​            5em 2em 0 0 red,
​            -5em 3em 0 0 red,
​            -3em 3em 0 0 red,
​            3em 3em 0 0 red,
​            5em 3em 0 0 red,
​            -2em 4em 0 0 red,
​            -1em 4em 0 0 red,
​            1em 4em 0 0 red,
​            2em 4em 0 0 red;
​            background: red;
​            width: 1em;
​            height: 1em;
​            overflow: hidden;
​            margin: 50px 0 70px 65px;
​        }

tv

​        .tv {
​            position: relative;
​            width: 200px;
​            height: 150px;
​            margin: 20px 0;
​            background: red;
​            border-radius: 50% / 10%;
​            color: white;
​            text-align: center;
​            text-indent: .1em;
​        }
​        .tv:before {
​            content: '';
​            position: absolute;
​            top: 10%;
​            bottom: 10%;
​            right: -5%;
​            left: -5%;
​            background: inherit;
​            border-radius: 5% / 50%;
​        }

chevron

​        .chevron {
​            position: relative;
​            text-align: center;
​            padding: 12px;
​            margin-bottom: 6px;
​            height: 60px;
​            width: 200px;
​        }
​        .chevron:before {
​            content: '';
​            position: absolute;
​            top: 0;
​            left: 0;
​            height: 100%;
​            width: 51%;
​            background: red;
​            transform: skew(0deg, 6deg);
​        }
​        .chevron:after {
​            content: '';
​            position: absolute;
​            top: 0;
​            right: 0;
​            height: 100%;
​            width: 50%;
​            background: red;
​            transform: skew(0deg, -6deg);
​        }

magnifying-glass

​        .magnifying-glass {
​            font-size: 10em;
​            display: inline-block;
​            width: 0.4em;
​            box-sizing: content-box;
​            height: 0.4em;
​            border: 0.1em solid red;
​            position: relative;
​            border-radius: 0.35em;
​        }
​        .magnifying-glass:before {
​            content: "";
​            display: inline-block;
​            position: absolute;
​            right: -0.25em;
​            bottom: -0.1em;
​            border-width: 0;
​            background: red;
​            width: 0.35em;
​            height: 0.08em;
​            transform: rotate(45deg);
​        }

facebook-icon

​        .facebook-icon {
​            background: red;
​            text-indent: -999em;
​            width: 100px;
​            height: 110px;
​            box-sizing: content-box;
​            border-radius: 5px;
​            position: relative;
​            overflow: hidden;
​            border: 15px solid red;
​            border-bottom: 0;
​        }
​        .facebook-icon:before {
​            content: "/20";
​            position: absolute;
​            background: red;
​            width: 40px;
​            height: 90px;
​            bottom: -30px;
​            right: -37px;
​            border: 20px solid # eee;
​            border-radius: 25px;
​            box-sizing: content-box;
​        }
​        .facebook-icon:after {
​            content: "/20";
​            position: absolute;
​            width: 55px;
​            top: 50px;
​            height: 20px;
​            background: # eee;
​            right: 5px;
​            box-sizing: content-box;
​        }

moon

​        .moon {
​            width: 80px;
​            height: 80px;
​            border-radius: 50%;
​            box-shadow: 15px 15px 0 0 red;
​        }

flag

​        .flag {
​            width: 110px;
​            height: 56px;
​            box-sizing: content-box;
​            padding-top: 15px;
​            position: relative;
​            background: red;
​            color: white;
​            font-size: 11px;
​            letter-spacing: 0.2em;
​            text-align: center;
​            text-transform: uppercase;
​        }
​        .flag:after {
​            content: "";
​            position: absolute;
​            left: 0;
​            bottom: 0;
​            width: 0;
​            height: 0;
​            border-bottom: 13px solid # eee;
​            border-left: 55px solid transparent;
​            border-right: 55px solid transparent;
​        }

cone

​        .cone {
​            width: 0;
​            height: 0;
​            border-left: 70px solid transparent;
​            border-right: 70px solid transparent;
​            border-top: 100px solid red;
​            border-radius: 50%;
​        }

cross

​        .cross {
​            background: red;
​            height: 100px;
​            position: relative;
​            width: 20px;
​        }
​        .cross:after {
​            background: red;
​            content: "";
​            height: 20px;
​            left: -40px;
​            position: absolute;
​            top: 40px;
​            width: 100px;
​        }

base

​        .base {
​            background: red;
​            display: inline-block;
​            height: 55px;
​            margin-left: 20px;
​            margin-top: 55px;
​            position: relative;
​            width: 100px;
​        }
​        .base:before {
​            border-bottom: 35px solid red;
​            border-left: 50px solid transparent;
​            border-right: 50px solid transparent;
​            content: "";
​            height: 0;
​            left: 0;
​            position: absolute;
​            top: -35px;
​            width: 0;
​        }

pointer

​        .pointer {
​            width: 200px;
​            height: 40px;
​            position: relative;
​            background: red;
​        }
​        .pointer:after {
​            content: "";
​            position: absolute;
​            left: 0;
​            bottom: 0;
​            width: 0;
​            height: 0;
​            border-left: 20px solid white;
​            border-top: 20px solid transparent;
​            border-bottom: 20px solid transparent;
​        }
​        .pointer:before {
​            content: "";
​            position: absolute;
​            right: -20px;
​            bottom: 0;
​            width: 0;
​            height: 0;
​            border-left: 20px solid red;
​            border-top: 20px solid transparent;
​            border-bottom: 20px solid transparent;
​        }

lock

​        .lock {
​            font-size: 8px;
​            position: relative;
​            width: 18em;
​            height: 13em;
​            border-radius: 2em;
​            top: 10em;
​            box-sizing: border-box;
​            border: 3.5em solid red;
​            border-right-width: 7.5em;
​            border-left-width: 7.5em;
​            /* margin: 0 0 6rem 0; */
​        }
​        .lock:before {
​            content: "";
​            box-sizing: border-box;
​            position: absolute;
​            border: 2.5em solid red;
​            width: 14em;
​            height: 12em;
​            left: 50%;
​            margin-left: -7em;
​            top: -12em;
​            border-top-left-radius: 7em;
​            border-top-right-radius: 7em;
​        }
​        .lock:after {
​            content: "";
​            box-sizing: border-box;
​            position: absolute;
​            border: 1em solid ted;
​            width: 5em;
​            height: 8em;
​            border-radius: 2.5em;
​            left: 50%;
​            top: -1em;
​            margin-left: -2.5em;
​        }
高端客户
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css3切角文本框_奇妙的 CSS shapes(CSS图形)
weixin_26833205的博客
12-31 241
CSS 发展到今天已经越来越强大了。其语法的日新月异，让很多以前完成不了的事情，现在可以非常轻松的做到。今天就向大家介绍几个比较新的强大的 CSS 功能：clip-pathshape-outsideshape 的意思是图形，CSS shapes 也就是 CSS 图形的意思，也就是使用 CSS 生成各种图形(圆形、矩形、椭圆、多边形等几何图形)。CSS3之前，我们能做的只有矩形，四四方方，条条框框。...
奇妙的 CSS shapes(CSS图形)
weixin_34413065的博客
06-12 236
CSS 发展到今天已经越来越强大了。其语法的日新月异，让很多以前完成不了的事情，现在可以非常轻松的做到。今天就向大家介绍几个比较新的强大的 CSS 功能： clip-path shape-outside shape 的意思是图形，CSS shapes 也就是 CSS 图形的意思，也就是使用 CSS 生成各种图形（圆形、矩形、椭圆、多边形等几何图形）。 CSS3之前，我们能做的只有矩...
【CSS 形状 (Shapes)】
Hey_Coder
12-14 765
CSS 形状 1. CSS 形状的基本概念 2. < basic-shape > 数据类型: CSS 属性中 使用的形状值 / 形状函数 Ⅰ. inset() 函数: 设置 内嵌矩形 (可设置各边偏移量 和 区域的圆角) Ⅱ. circle() 函数: 圆形 (1个半径 at 一个圆心的位置) Ⅲ. ellipse() 函数: 椭圆形 (2个半径 at 1个圆心的位置) Ⅳ. polygon() 函数: 多边形 顶点的坐标 值对 Ⅴ. path() 函数: svg path 路径字符串 3.
CSS3 Shape详解
cwyp18809的博客
03-25 2475
目录 一、 CSS Shapes简介 1、 功能简介 2、 浏览器支持 目前支持以下版本： 二、 怎样使用CSS Shapes 1、 shape-outside属性 2、Shape的参考盒模型 三、 CSS Shapes拓展 1、 利用图片来定义一个形状 四、 Shape工具 方块套方块:这是我们网页一直以来的样子。通过使用CSS，我们一...
【译】CSS Shapes 简介
西装暴徒_12138的博客
04-01 387
CSS shapes简介 css Shapes 允许我们通过自定义文本内容可以环绕的几何形状，图像和渐变，来创建有趣且独特的布局。本次教程会教你如何使用他们。 在 CSS Shapes问世之前，为网页设计文本自由环绕的杂志式布局几乎是不可能的。相反，网页设计布局传统上一直用网格，盒子和直线构造。 CSS Shapes允许我们自定义环绕的几何形状。这些形状可以是圆，椭圆，简单或复杂的多边形，甚至图...
CSS_shape.zip_CSS 绘制图形
09-21
这个文件可能包含了一种使用CSS边框和透明度技巧来构建心形的方法。 3. `shape_infinity.html`：无限符号（∞）是通过使用`border-radius`和`rotate`属性来实现的，这展示了CSS的灵活性和创造性。 4. `shape_...
shape-the-pixel
04-16
"shape-the-pixel" 是一个看似简单的绘图工具项目，其主要目的是让用户能够塑造和编辑像素。这个项目可能是一个Web应用程序，由不同的组件和模块组成，以提供丰富的用户体验。让我们深入探讨一下与这个项目相关的几...
css制作的几何图形7.3
07-04
首先，我们来探讨CSS如何构建基本的几何图形。CSS通过设置`border-radius`、`transform`、`background-color`等属性来创建各种形状。以下是一些常见的CSS几何图形及其制作方法： 1. **正方形和矩形**：最基础的形状...
CSS3制作花纹图案动画特效.zip
11-02
【描述】：“CSS3制作花纹图案动画特效.zip”可能包含了一个项目或教程，教用户如何利用CSS3的特性来构建动态的花纹图案。这个过程通常涉及对CSS3属性的深入理解，如渐变（gradients）、径向渐变（radial gradients...
纯CSS3绘制火龙果动画特效.zip
10-15
【标题】"纯CSS3绘制火龙果动画特效.zip"所涵盖的知识点主要集中在CSS3技术上，尤其是CSS3的动画（Animations）和图形绘制（Shape and Drawing）方面。CSS3是层叠样式表（Cascading Style Sheets）的第三个版本，它...
css布局——Shapes布局
朝阳39的博客
10-26 399
CSS Shapes布局用于实现不规则的图文环绕效果，需配合float一起使用。 兼容性: 除IE和Edge外都支持 shape-outside 指定图形边缘 1. 关键字 <div class="container"> <span class="shape margin-box"></span> <p>文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容。</p>
图解CSS形状Shapes
xiaomohhh的博客
08-19 543
CSS的高级特效----形状（Shapes） CSS Shapes 允许我们通过定义文本内容可以环绕的几何形状、图像和渐变，来创建有趣且独特的布局。 CSS Shapes包含两组属性，shape-outside 和 shape-outside。 本文不涉及shape-inside，因为目前好像还没有浏览器实现它。 shape-outside 有四个形状函数( 只能应用给浮动元素 ) ：circ...
css mask
CamilleZJ的博客
01-04 557
CSS属性mask允许使用者通过遮罩或者裁切特定区域的图片的方式来隐藏一个元素的部分或者全部可见区域。和svg的mask很像 mask的简写会将mask-border设为初始值。使用mask的简写优于使用其他简写或者各自属性的设置来覆盖。这能保证mask-border也会重新设置为新的效果样式。 初始值 as each of the properties of the shorthand: mask-image:none mask-mode:match-sour...
css3 shapes是什么意思,如何在Web中使用CSS Shapes
weixin_39724748的博客
08-04 183
布局一般都是遵循按行和列等线性原则，Web网站的布局到今天为止很大程度上受到这些原则的影响。虽然CSS Grid的出现让布局变得更好，更灵活，但相对于印刷媒体而言，Web布局总体上还是受到很好的限制，特别是内容流上。杂志和报纸一直有很好的办法来安排内容。比如文本绕着非矩形排列。直到目前为止，Web上的布局都局限于规则矩形排列，无法让内容流实现非矩形布局。接下来让我们一起探讨如何使用CSS Shap...
【CSS】用shape完美实现文字环绕 circle、ellipse、polygon
码婆Doph
11-25 6608
shape简介shape有一下两个属性： 1.shape-outside：让文字从图片外部开始环绕，以及设置图片的形状 2.shape-inside：设置图片的内部形状，目前基本不支持shape关键字如下（类似box-sizing）： margin-box content-box border-box padding-box 基本形状用以下函数来定义： circle(size a
CSS3干货20：CSS3中的形状（shape）及其应用
九天翔龙的技术博客
08-12 1394
一、形状 Shape 形状 Shape 的出现，打破了传统 CSS 中，只有矩形形状的尴尬，可以让我们的形状多元化。 用以下结构和样式为基础案例说明： <div class="txtBox"> <div class="txtBox_content"> <p> 小说是以刻画人物形象为中心，通过完整的故事情节和环境描写来反映社会生活的文学体裁。 </p> <p>
css实现剪切蒙版,魔法般的网页图片修剪！使用Houdini建立CSS剪切蒙版
weixin_36324426的博客
08-04 1130
作为设计开发人员，我们经常将CSS作为理所当然的生产工具。只需要调整一系列参数，我们就可以控制整个网页的样式，而浏览器将会替我们完成一系列复杂的渲染工作。但当CSS有新功能出现的时候，我们却往往无法第一时间将它应用于生产。这不仅是开发者是否愿意学习的问题，而主要是用户的人均浏览器版本无法很快地跟上时代前沿，导致新的CSS效果无法很好地呈现给用户，甚至会出现恶性Bug。而Houdini就是为了解决这...
CSS Shapes实现元素滚动自动环绕
肖肖肖丽珠的博客
09-25 827
浏览器支持 目前只有Webkit Nightly和Chrome Canary支持CSS Shape，但是它的Model Level 1已经是Candidate Recommendation（候选推荐）了，因此在规范中定义的属性和语法已经很稳定了。看来要不了多久其他浏览器也会实现CSS Shape。本Level的规范主要聚焦在几个Shape属性，这些属性主要规定了形状周围的内容该如何环绕。更具体地
HTML常用标签和CSS的运用
最新发布
FHYAAAX的博客
08-05 367
HTML（超文本标记语言）是一种用于创建网页的标准标记语言。
CSS揭秘：前端工程师必读的实战技巧
“形状”部分讲解了如何用CSS构建非传统几何形状，比如圆角矩形、多边形甚至不规则图形，这些技巧对于构建响应式布局和图形设计至关重要。通过CSS的clip-path、mask和shape-outside属性，设计师可以更好地控制元素的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值