css样式实现

bettercat

已于 2023-05-22 15:11:36 修改

阅读量372

点赞数

分类专栏： CSS 文章标签： css 前端

于 2022-07-13 16:30:20 首次发布

本文链接：https://blog.csdn.net/sd6022/article/details/125766888

版权

CSS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

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>
</head>
<style>
    .main {
        border: 1px solid #38b3c4;
        height: 82px;
        width: 500px;
        border-radius: 50px;
        background: url("../images/map_yj_icon.png") no-repeat;

    }

    /* .img {
        height: 100%;
        width: 82px;
    } */

    /* .topline {
        width: 100%;
        height: 2px;
        background: linear-gradient(to right, rgba(0, 0, 0, .1) 12%, hsl(0, 98%, 54%) 50%, rgba(0, 0, 0, .1) 100%);
    } */

    .alarmBox {
        margin: 0 auto;
        position: relative;
        top: 50%;
        transform: translateY(-50%);
        /* border-top: 1px solid rgb(249 106 101);
        border-bottom: 1px solid rgb(249 106 101); */
        width: 90%;
        height: 80%;
        line-height: 35px;
        background-image: linear-gradient(to right, rgb(251 251 251 / 8%) 12%, rgb(241 222 227 / 80%) 50%, rgb(251 251 251 / 8%) 100%);
        color: rgb(255 0 0 / 90%);
        overflow: hidden;
    }

    .topline,.bottomline  {
        margin: 0 auto;
        position: relative;
        top: 10%;
        left: 25px;
        transform: translateY(-50%);
        width: 80%;
        height: 1px;
        background: linear-gradient(to right, rgb(217, 33, 13, .2) 0%, rgb(253, 23, 23) 45%, rgba(217, 33, 13, .2) 100%);
    }

    .bottomline {
        top: 12%;
    }

    .line {
        width: 100px;
        height: 2px;
        background: linear-gradient(to right, rgba(0, 0, 0, .1) 0%, rgba(0, 0, 0, .8) 50%, rgba(0, 0, 0, .1) 100%);
    }

    .linear {
        width: 100%;
        height: 2px;
        background: linear-gradient(to right,
                rgba(0, 0, 0, 0) 0%,
                rgba(0, 0, 0, 0) 10%,
                rgba(35, 198, 200, 0.3) 20%,
                rgba(35, 198, 200, 0.4) 30%,
                rgba(35, 198, 200, 0.5) 40%,
                rgba(35, 198, 200, 0.8) 50%,
                rgba(35, 198, 200, 0.5) 60%,
                rgba(35, 198, 200, 0.4) 70%,
                rgba(35, 198, 200, 0.3) 80%,
                rgba(0, 0, 0, 0) 90%,
                rgba(0, 0, 0, 0) 100%)
    }
</style>

<body>
    <div class="main">
        <!-- <div class="img">
            <img src="../images/map_yj_icon.png" alt="" srcset="">
        </div> -->
        <div class="topline"></div>
        <div class="alarmBox">


        </div>
        <div class="bottomline"></div>
    </div>
    <br>
    测试
    <div class="line"></div>
    <hr><br><br> <br> <br> <br>
    <div class="linear"></div>
</body>

</html>

2、css渐变文本

在这里插入图片描述

<style>
.demo-text {
  width: 300px;
  font-size: 48px; 
  background: linear-gradient(315deg, #42d392 25%, #647eff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
</style>
<div class="demo-text">Hello World!</div>

3、css扇形圆锥效果

在这里插入图片描述

<style>
.conic-effect {
  background: conic-gradient(rgb(255, 132, 45) 0% 25%, rgb(166, 195, 209) 25% 56%, #ffb50d  56% 100%);
  border-radius: 50%;
  width: 150px;
  height: 150px;
}
</style>  
<div class="conic-effect"></div>

4、css实现首字母大写排版效果

在这里插入图片描述

<style>
  .demo:first-letter {
    font-size: 100px;
    display: block;
    float: left;
    line-height: .5;
    margin: 15px 15px 10px 0 ;
  }
</style>  
<p class="demo">Hello world!</p>