css两种方式实现彩虹

最新推荐文章于 2024-03-08 22:24:47 发布

阿润�

最新推荐文章于 2024-03-08 22:24:47 发布

阅读量221

点赞数 1

本文链接：https://blog.csdn.net/dhdclsdwdsnxhg/article/details/113337846

版权

本文介绍了两种使用CSS实现彩虹效果的方法，包括基本的css和更先进的css3径向渐变技术，帮助开发者打造多彩的视觉体验。

摘要由CSDN通过智能技术生成

第一种 css

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>background-size</title>
    <style type="text/css">
        .box1 {
        width: 400px;
        height: 200px;
        overflow: hidden;
    }
    .box1::before {
        float: left;
        display: block;
        width: 400px;
        height: 400px;
        border-radius: 100%;
        box-sizing: border-box;
        border: solid 10px blue;
        content: " ";
    }
    .box1::after {
        margin-top: 10px;
        margin-left: 10px;
        display: block;
        width: 380px;
        height: 380px;
        border-radius: 100%;
        box-sizing: border-box;
        border: solid 10px yellow;
        content: " ";
    }
    .box2 {
        float: left;
        margin-top: -180px;
        margin-left: 20px;
        width: 360px;
        height: 180px;
        overflow: hidden;

最低0.47元/天解锁文章

阿润�

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
css两种方式实现彩虹

第一种 css<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>background-size</title> <style type="text/css"> .box1 { width: 400px; height: 200px; overflo
复制链接

扫一扫