CSS3之文本阴影、盒子阴影、圆角边框、字体引入

最新推荐文章于 2024-08-25 19:24:32 发布
最新推荐文章于 2024-08-25 19:24:32 发布
阅读量138 收藏
点赞数
分类专栏： 前端 文章标签： css html css3 html5 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_57752092/article/details/124485835
版权

一、文本阴影

    <style>
      div{
          /* 6px是水平方向位移 */
          /* 5px是垂直方向位移 */
          /* 3px是模糊程度 */
          /* orange模糊颜色 */
          text-shadow: 6px 5px 3px orange;
          text-shadow: 6px 5px 3px orange,-10px -10px 3px greenyellow;
          font-size: 35px;
      }
    </style>
</head>
<body>
    <div>大家好</div>
</body>

二、盒子阴影

   <style>
      div{
          width: 100px;
          height: 100px;
          background-color: yellow;
          margin: 0 auto;
          /* 第四个是阴影大小 */
          /* box-shadow: 10px 10px 3px 10px blueviolet,-10px -10px 3px rgb(13, 207, 58); */
          box-shadow: 10px 10px 10px orangered inset;
      }
    </style>
</head>
<body>
    <div></div>
</body>

三、圆角边框

    <style>
      div{
          width: 100px;
          height: 100px;
          background-color: yellow;
          margin: 0 auto;
          /* border-radius：支持px 或者百分比 
          v1,四个角一样
          v1,v2，左上右下，右上左下 一致
          v1,v2,v3，左上，左下右上，右下
          v1,v2,v3，v4，顺时针
          */

         /* border-radius: 10px 10px 0px; */
         border-top-left-radius: 10px;
         border-bottom-left-radius: 30px;
         border-bottom-right-radius: 10px;
         border-top-right-radius: 30px;

      }
    </style>
</head>
<body>
    <div></div>
</body>

  

    <style>
      div{
          width: 100px;
          height: 100px;
          background-color: yellow;
          margin: 0 auto;
          /* 30px/60px  水平/垂直 只支持border-radius */
          /* border-radius: 30px/60px; */
          /* border-radius: 10px 20px 30px 40px/50px 60px 70px 80px; */
          /* 圆是盒子的一半 或者 50% */
          border-radius: 50px;
          border-radius: 50%;
      }
    .cfx{
        width: 500px;
        height: 200px;
        background-color: blueviolet;
        margin: 0 auto;
        border-radius: 30px;
    }
    .byx{
        /* 半圆：高是宽的一半
           border-radius: 50px 50px 0 0;*/
        width: 100px;
        height: 50px;
        background-color: green;
        margin: 0 auto;
        border-radius: 50px 50px 0 0;
    }
    .sx{
        /* 扇形 */
        width: 100px;
        height: 100px;
        background-color: orangered;
        margin: 0 auto;
        border-radius: 0 100px 0 0;
    }

    </style>
</head>
<body>
    <div></div>
    <div class="cfx"></div>
    <div class="byx"></div>
    <div class="sx"></div>
</body>

    <style>
      *{
          margin: 0;
          padding: 0;
      }
      input{
          outline: none;
      }
      div{
          width: 935px;
          height: 120px;
          border: 1px solid #dedede;
          margin: 0 auto;
          background: #eceaeb;
          border-radius: 15px;
          box-shadow: 4px 11px 7px #bfbfbf,-4px 11px 7px #bfbfbf;
      }
      [type=text]{
          width: 683px;
          height: 86px;
          margin: 17px;
          border: 3px solid #cccccc;
          border-radius: 4px;
          font-size: 25px;
          text-indent: 11px;
      }
      [type=button]{
          width: 200px;
          height: 83px;
          background: green;
          border-radius: 5px;
          border: 1px solid #5ca3b4;
          font-size: 23px;
          color: white;
      }
    </style>
</head>
<body>
    <form>
        <div>
            <input type="text" placeholder="Searcher for css3,html5,jQuery... ">
            <input type="button" value="Go">
        </div>
    </form>
</body>

四、字体引入

    <style>
        @font-face {
            font-family: dyc;
            src: url(FZSTK.TTF);
        }
     div{
        font-family: dyc;
        font-size: 50px;
        color: red;
        text-shadow: 5px 0px 0px green;
     }
    </style>
</head>
<body>
    <div>好好学习，天天向上</div>
</body>

 

 五、怪异盒模型

    <style>
        .box1{
            width: 200px;
            height: 200px;
            background: green;
            padding: 30px;
            border: 10px solid black;
            /* 标准盒模型 */
            box-sizing: content-box;
        }
        .box2{
            width: 200px;
            height: 200px;
            background: red;
            padding: 30px;
            margin-top: 100px;
            border: 10px solid black;
            /* 怪异盒模型 */
            box-sizing: border-box;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>

六、弹性盒

    <style>
.box{
    width: 500px;
    height: 200px;
    border: 2px solid black;
    margin: 100px auto;
    display: flex;

    /* 修改主轴方向
    row,column row-reverse 水平，竖直 水平反向排列，竖直反向排列*/
    /* 弹性盒 */
    flex-direction: column-reverse;

}
.box span{
    width: 100px;
    height: 100px;
    border: 1px solid red;
   /* 自动水平、垂直居中 */
    margin: auto;
}
    </style>
</head>
<body>
    <!-- 影响：
    1.子元素默认横向排列
    2.行内元素变成块元素
    3.只有一个元素的时候，margin: auto 自动居中-->
    <div class="box">
        <span>1111</span>
        <span>2222</span>
        <span>3333</span>
        <span>4444</span>
    </div>
</body>

 

    <style>
    .box{
        width: 200px;
        height: 500px;
        border: 2px solid black;
        margin: 100px auto;
        display: flex;
        /* row,column row-reverse 水平，竖直 水平反向排列，竖直反向排列*/
        /* 弹性盒 */
        flex-direction: column;

        /* 调整主轴对齐方向
        flex-start
        flex-end
        center
        space-between 两端对齐
        space-around 距离环绕 */
        justify-content: space-between;
        /* 调整侧轴
        flex-start
        flex-end
        center */
        align-items: flex-end;

    }
    .box div{
        width: 100px;
        height: 100px;
        border: 1px solid red;
    }
    </style>
</head>
<body>
    <div class="box">
        <div>1111</div>
        <div>2222</div>
        <div>3333</div>
        <div>4444</div>
    </div>
</body>

 

 折行

    <style>
    .box{
        width: 500px;
        height: 500px;
        border: 2px solid black;
        margin: 100px auto;
        display: flex;
        /* 折行 */
        flex-wrap: wrap;
        /* 控制折行后行间距 */
        align-content: flex-start;
    }
    .box div{
        width: 100px;
        height: 100px;
        border: 1px solid red;
    }
    </style>
</head>
<body>
    <div class="box">
        <div>1111</div>
        <div>2222</div>
        <div>3333</div>
        <div>4444</div>
        <div>5555</div>
        <div>6666</div>
        <div>7777</div>
        <div>1111</div>
        <div>2222</div>
        <div>3333</div>
        <div>4444</div>
        <div>5555</div>
        <div>6666</div>
        <div>7777</div>
    </div>
</body>

 

    <style>
    .box{
        width: 300px;
        height: 120px;
        border: 1px solid black;
        margin: 10px auto;
        display: flex;
        /* 弹性盒 */
        flex-direction: row;
        /* 折行 */
        flex-wrap: wrap;
        /* 控制折行后行间距 */
        align-content: flex-start;
    }
    .box div{
        width: 60px;
        height: 60px;
        border: 1px solid red;
        box-sizing: border-box;
        display: flex;
    }
    .box div img{
        width: 40px;
        height: 40px;
        margin: auto;
    }
    </style>
</head>
<body>
    <div class="box">
        <div><img src="../image/xx.png" alt=""></div>
        <div><img src="../image/xx.png" alt=""></div>
        <div><img src="../image/xx.png" alt=""></div>
        <div><img src="../image/xx.png" alt=""></div>
        <div><img src="../image/xx.png" alt=""></div>
        <div><img src="../image/xx.png" alt=""></div>
        <div><img src="../image/xx.png" alt=""></div>
        <div><img src="../image/xx.png" alt=""></div>
        <div><img src="../image/xx.png" alt=""></div>
        <div><img src="../image/xx.png" alt=""></div>
    </div>
</body>

七、7.1项目——对齐方式

    <style>
    .box{
        width: 500px;
        height: 500px;
        border: 2px solid black;
        margin: 100px auto;
        display: flex;
    }
    .box div{
        width: 100px;
        border: 1px dashed red;
        box-sizing: border-box;
    }
    .div1{
        height: 100px;
        align-self: flex-start;
    }
    .div2{
        height: 100px;
        align-self: flex-end;
    }
    .div3{
        height: 100px;
        align-self: center;
    }
    .div4{
        height: 100px;
        align-self: baseline;
    }
    .div5{
        /* 拉伸，撑开 */
        align-self: stretch;
    }
    </style>
</head>
<body>
    <div class="box">
        <div class="div1">1111</div>
        <div class="div2">2222</div>
        <div class="div3">3333</div>
        <div class="div4">4444</div>
        <div class="div5">5555</div>
    </div>
</body>
<!-- =============================================== -->
    <style>
    .box{
        width: 500px;
        height: 500px;
        border: 2px solid black;
        margin: 100px auto;
        display: flex;
        flex-direction: column;
    }
    .box div{
        /* width: 100px; */
        height: 100px;
        border: 1px dashed red;
        box-sizing: border-box;
    }
    .div1{
        align-self: flex-start;
    }
    .div2{
        align-self: flex-end;
    }
    .div3{
        align-self: center;
    }
    .div4{
        align-self: baseline;
    }
    .div5{
        /* 拉伸，撑开 */
        /* align-self: stretch; */
    }
    </style>

 7.2项目——调整顺序

    <style>
    .box{
        width: 500px;
        height: 200px;
        border: 2px solid black;
        margin: 100px auto;
        display: flex;
        /* 从相反方向开始 */
        /* flex-direction: row-reverse; */
    }
    .box div{
        width: 100px;
        height: 100px;
        border: 1px dashed red;
        box-sizing: border-box;
    }
    .div1{
        /* order 默认从0开始 */
        order: 0;
    }
    .div2{
        order: 3;
    }
    .div3{
        order: 2;
    }
    .div4{
        order: 1;
    }
    .div5{
        order: -1;
    }

    </style>
</head>
<body>
    <div class="box">
        <div class="div1">1111</div>
        <div class="div2">2222</div>
        <div class="div3">3333</div>
        <div class="div4">4444</div>
        <div class="div5">5555</div>
    </div>
</body>

 

 7.3项目——剩余宽高

    <style>
    .box{
        width: 500px;
        height: 200px;
        border: 2px solid black;
        margin: 0 auto;
        display: flex;
    }
    .box div{
        width: 100px;
        height: 100px;
        border: 1px dashed red;
    }
    .div1,.div3{
        flex: 1;
    }
    .div2{
        /* 占满剩余空间  占据8/10的空间 */
        flex: 8;
    }
    </style>
</head>
<body>
    <div class="box">
        <div class="div1">1111</div>
        <div class="div2">2222</div>
        <div class="div3">3333</div>
    </div>
</body>
<!-- ================================================= -->
    <style>
    .box{
        width: 500px;
        height: 200px;
        border: 2px solid black;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
    }
    .box div{
        width: 100px;
        height: 100px;
        border: 1px dashed red;
    }
    /* .div1,.div3{
        flex: 1;
    } */
    .div2{
        /* 占满剩余空间 */
        flex: 1;
    }
    </style>

    <style>
        *{
            margin: 0;
            padding: 0;
        }
        html,body{
            height: 100%;
        }
        body{
            display: flex;
        }
        .box1,.box3{
            width: 100px;
            background-color: yellow;
        }
        .box2{
            /* 占满剩余空间 */
            flex: 1;
            background-color: brown;
        }
    </style>
</head>
<body>
        <div class="box1">1111</div>
        <div class="box2">2222</div>
        <div class="box3">3333</div>
</body>

豆芽菜♀
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html5+css3实现网页图标的过渡与变形
weixin_46439490的博客
04-09 508
代码如下： <!DOCTYPE html> <html> <head>   <meta charset="utf-8">   <title>过渡与变形</title>   <style  type="text/css">  &nbsp...
CSS----flex布局
ITher的博客
01-07 526
1. flex 是什么？ flex 是 Flexible Box 的缩写，就是弹性盒子布局. 2. 为什么我们需要 flex? 解决元素居中问题自动弹性伸缩以及适配不同大小的屏幕和移动端 3、如何设置flex布局 与grid类似，flex也分为块级元素和行内元素两种，分别为display:flex（块级元素）与display:inline-flex（行内元素）。 我们先来举个例子看看flex有何作用，首先，我们先来看未设置flex布局时的样子： <!DOCTYPE html&...
CSS3阴影 box-shadow的使用和技巧总结
热门推荐
freshlover的专栏
05-28 71万+
text-shadow是给文本添加阴影效果，box-shadow是给元素块添加周边阴影效果。随着html5和CSS3的普及，这一特殊效果使用越来越普遍。 基本语法是{box-shadow:[inset] x-offset y-offset blur-radius spread-radiuscolor} 对象选择器 {box-shadow:[投影方式] X轴偏移量 Y轴偏移量阴影模糊半径 阴影扩
清晰易懂的了解CSS中的边框颜色渐变
Hr_ving的博客
08-13 1万+
清晰易懂的了解CSS中的边框颜色渐变 使用边框颜色渐变之前，先简单了解一下两种渐变方式： 线性渐变 linear-gradient(方向, 颜色1, 颜色2, … ,颜色n); 径向渐变 radial-gradient(颜色1 覆盖区域大小,颜色2 覆盖区域大小, … ); 注：线性渐变的方向可以为： ​ 1、一个方向值时： to bottom 表示从上边到下边 ​ 2、两个方向值时： to right bottom 表示从左上角到右下角 ​ 径向渐变的覆盖区域大
css 如何画三角形
Latency の 博客
07-20 352
之前一直不懂用 css 的 border 属性怎么画出的三角形，今天来总结一下。 关键就在于如果指定一条边的border，那这个border就是一条直线。 但如果每个边都指定border，但是隐藏其他三个边，剩下的一条border显示为一个梯形 .tri-angle{ height: 200px; width: 200px; /*border: 10px so
CSS3圆角边框、盒子阴影、文字阴影
qq_43623147的博客
12-09 452
圆角边框 border-radius属性用于设置元素的外边框圆角。 语法： box-radius: length; 例如： border-radius: 10px; border-radius: 50%; 参数值可以为数值或百分比的形式 如果是正方形，想要设置一个圆，把数值改为边长的一半即可，或者直接写为50% 如果是矩形，想要将左右两边设置为半圆，将数值设置为高度的一半 该属性是一个简写属性，可以跟四个值，分别代表左上角、右上角、右下角、左下角 分开写：border-top-l..
CSS3文本阴影、盒子阴影
空之境界
03-08 664
CSS3中阴影分为两种：文本阴影text-shadow和盒子阴影box-shadow，这两个属性可以在不添加背景图片的情况下实现阴影的效果，在我们美化网页时提供了很大的便利。那么这两个属性分别怎么用呢？ 1. text-shadow 该属性的语法规范是text-shadow: 1px 1px 1px #666; 在讲css阴影属性之前我们先来了解一下阴影有关的常识。 阴影的产生是光照在物体上，会在...
CSS3-边框-外轮廓-文本-渐变-WEB字体
weixin_57218747的博客
04-30 688
边框-外轮廓-文本-渐变-WEB字体 1 回顾 1.1 基本语法 新增的长度单位： rem、vw、vh、vmax、vmin 新增的颜色设置方式： rgba()、hsl()、hsla() 1.2 选择器 1. 基本选择器 标签名 类名 ID名 全局 并集： div,p,h1 {} 交集： p.item {} 2. 层级选择器 后代元素选择器 空格 子元素选择器 > 选择紧邻在后面的一个兄弟元素 + 选择后面所有的兄弟元素
CSS3.rar_CSS3_css chm_css3 chm pudn
09-24
1. **圆角边框**：`border-radius`属性使得元素可以拥有圆形或椭圆形的边框。 2. **阴影效果**：`box-shadow`用于添加元素的阴影效果，而`text-shadow`则用于文本的阴影效果。 3. **背景图像**：`background-size`...
细说CSS(CSS+CSS3)
06-14
CSS3引入了圆角边框（`border-radius`）和边框阴影（`box-shadow`）。背景可以设定颜色、图像、重复方式和位置，CSS3的`background-image`支持渐变和多背景。 **5. CSS盒子模型** CSS的盒子模型描述了元素如何占用...
css3实现Metro风格特效代码
03-20
CSS3允许我们设置圆角边框（`border-radius`）、渐变背景（`background-image: linear-gradient()`）以及盒阴影（`box-shadow`），这些特性可以为元素添加层次感和立体感，使其更符合现代设计语言。 三、Flexbox...
HTML5和CSS3 WEB技术开发
张晨光老师的播客
01-02 6035
B站视频参考：https://www.bilibili.com/video/BV1H44y1k7ze/[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Uwbid43Z-1672665963237)(asseits/image-20210831212039584.png)]HTML:超文本标记语言(Hyper Text Markup Language)，标准通用标记语言下的一个应用。 HTML 不是一种编程语言（C、Java、python、R等），而是一种标记语言 (markup
CSS / 比较常用的三角及border用法
zhumizhumi的博客
10-16 959
1、上三角 <div id="up"></div> #up { width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 20px solid red; } 2、下三角 <div...
HTML/CSS border
wyd458677的博客
09-01 467
border是div的边框，在div外面加边框  1、 border:10px solid black;//dashed 2、  border-top:10px solid black;          border-right:10px solid black;          border-bottom:10px solid black;         border-left:
Tailwind CSS的介绍和使用
mq1314520_zhl的博客
08-21 389
Tailwind CSS 的工作原理是扫描所有 HTML 文件、JavaScript 组件以及任何 模板中的 CSS 类（class）名，然后生成相应的样式代码并写入 到一个静态 CSS 文件中。他快速、灵活、可靠，没有运行时负担。Font Family - TailwindCSS中文文档 | TailwindCSS中文网。
小兔鲜首页制作css
qq_65046523的博客
08-21 458
项目名-客户端xtx-pc1.images：存放固定使用的图片，例如：logo、样式修饰图2.uploads:存放非固定图片，例如：商品图、宣传图等需要上传的图片3.iconfont:字体图标素材4.css文件：4.1base.css：基础的公共样式4.2common.css：各个网页相同模块的重复样式，例如头部、底部4.3index.css：首页css样式5.index.html：首页html文件。
CSS中flex：1是什么属性
ggq53219的博客
08-22 395
是 CSS 中的一个简写属性，用于设置 Flex 项目的灵活伸缩比例（flex-grow）、收缩比例（flex-shrink）以及基础大小（flex-basis）。主要是用来告诉 Flex 容器中的项目，如果有剩余空间，它们应该等比例地放大，如果空间不足，它们也应该等比例地缩小，而它们的初始大小（在没有额外空间或需要缩小的情况下）是。（尽管这通常不是预期的行为，特别是当你想让项目根据其内容大小开始时）。为了更精确地控制项目的大小和伸缩行为，你可能会想使用更明确的。
原神4.8版本重点培养和抽到角色数据表：修改了添加倒计时.隐藏了抽到角色数据表删除按钮、备注列和选择列
lulei5153的博客
08-22 690
当用户修改某个字段（等级、命座、天赋）时，不仅更新当前表格的数据，还会找到另一个表格中对应的角色，并更新其数据。最后，重新渲染两个表格以显示最新的数据。这样可以确保两个表格的数据始终保持一致。
CSS content 属性：伪元素的魔法师
最新发布
2401_85341950的博客
08-25 379
CSS（层叠样式表）是控制网页样式的强大工具。其中，content属性与伪元素结合使用，能够实现许多创造性的设计效果。伪元素如::before和::after允许我们在选定元素前后插入内容，而content属性则定义了这些内容。本文将详细探讨content属性的用法，包括如何使用它来插入文本、图片、计数器等，并提供丰富的代码示例，以帮助开发者和设计师理解并应用这一功能。在CSS中，伪元素允许我们为元素添加特殊的部分或样式，而不需要修改HTML结构。最常见的伪元素是::before和::after。
HTML5与CSS3新特性探索：圆角、阴影、自定义字体与文本换行
阴影效果也是CSS3的一大亮点，`box-shadow` 属性用于元素的盒子阴影，而`text-shadow` 则为文本添加阴影，增加层次感。自定义字体的实现是通过`@font-face`规则，允许设计师引入本地或网络上的字体，确保了跨平台的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值