16、圆角边框及阴影和经验分享

最新推荐文章于 2024-06-10 20:11:11 发布

工一木子

最新推荐文章于 2024-06-10 20:11:11 发布

阅读量551

点赞数

分类专栏： CSS学习文章标签： css html html5

本文链接：https://blog.csdn.net/Prince140678/article/details/120390120

版权

CSS学习专栏收录该内容

24 篇文章 0 订阅

订阅专栏

4.4、圆角边框

4个角

<style>
            div {
                width: 50px;
                height: 50px;
                margin: 30px;
                background: red;
                border-radius: 50px 0 0 0;
            }
            img {
                border-radius: 50px;//让头像由方变为圆
            }
        </style>

4.5、盒子阴影

 <style>
            img {
                border-radius: 50px;
                box-shadow: 10px 10px 100px yellow;
            }
        </style>

代码show

1.边框圆角.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            /*
            border-radius: 100px 50px 10px 40px;
            左上 右上 右下 左下 顺时针方向
            圆圈：圆角=半径
            */
            div {
                width:100px;
                height:100px;
                border:10px solid red;
                border-radius: 100px 50px 10px 40px;
            }
        </style>
    </head>
    <body>
        <div></div>
    </body>
</html>

效果图：
在这里插入图片描述

2.圆形.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            div {
                width: 50px;
                height: 50px;
                margin: 30px;
                background: red;
                border-radius: 50px 0 0 0;
            }
            img {
                border-radius: 50px;//让头像由方变为圆
            }
        </style>
    </head>
    <body>
        <div></div>
        <img src="images/tx.jpg" alt="">
    </body>
</html>

效果图：

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZjqBlpJr-1632113393483)(C:\Users\Administrator\Desktop\学习笔记\前端学习\CSS\16、圆角边框及阴影和经验分享.assets\image-20210920124448643.png)]$

1.阴影.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
       <!-- margin:0 auto;居中
        要求：块元素，块元素有固定的宽度-->
        <style>
            img {
                border-radius: 50px;
                box-shadow: 10px 10px 100px yellow;
            }
        </style>
    </head>
    <body>
        <div style="width:500px;display: block;text-align: center">
            <img src="images/tx.jpg" alt="">
        </div>
    </body>
</html>

效果图：（头像发光）

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1pAFeMeo-1632113393488)(C:\Users\Administrator\Desktop\学习笔记\前端学习\CSS\16、圆角边框及阴影和经验分享.assets\image-20210920124527242.png)]$

彩蛋

1.CSS实现让一个div变为圆，扇形，半圆

border-radius属性

border-radius: 50px 0 0 0;

2.右键查看源代码

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QXRBxQFg-1632113393491)(C:\Users\Administrator\Desktop\学习笔记\前端学习\CSS\16、圆角边框及阴影和经验分享.assets\image-20210920124611851.png)]$

3.网页另存为

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KkqvxXKQ-1632113393492)(C:\Users\Administrator\Desktop\学习笔记\前端学习\CSS\16、圆角边框及阴影和经验分享.assets\image-20210920124623985.png)]$

4.直接修改目标图片和原网站图片一样大小

用mspaint打开，直接修改像素改一致即可。

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-htUVedJQ-1632113393495)(C:\Users\Administrator\Desktop\学习笔记\前端学习\CSS\16、圆角边框及阴影和经验分享.assets\image-20210920124654021.png)]$

5.模板之家

搜索

1)后台管理系统

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ysbHcTWB-1632113393496)(C:\Users\Administrator\Desktop\学习笔记\前端学习\CSS\16、圆角边框及阴影和经验分享.assets\image-20210920124801399.png)]$

2)门户网站

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5WSd7p5V-1632113393497)(C:\Users\Administrator\Desktop\学习笔记\前端学习\CSS\16、圆角边框及阴影和经验分享.assets\image-20210920124814658.png)]$

6.vue-admin

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jrHkYTuv-1632113393499)(C:\Users\Administrator\Desktop\学习笔记\前端学习\CSS\16、圆角边框及阴影和经验分享.assets\image-20210920124902233.png)]$

7.ice.work–>组件

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-af4RMvlC-1632113393500)(C:\Users\Administrator\Desktop\学习笔记\前端学习\CSS\16、圆角边框及阴影和经验分享.assets\image-20210920124933527.png)]$