CSS的圆角边框以及阴影

最新推荐文章于 2024-04-21 10:40:16 发布
最新推荐文章于 2024-04-21 10:40:16 发布
阅读量4.4k 收藏 25
点赞数 7
分类专栏： CSS 系列笔记+源码展示 文章标签： css html 网页
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_47556601/article/details/122792453
版权

大家好，我们今天分享一下CSS的圆角边框以及阴影
源码实例：

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            border: 10px solid red;
            border-radius: 10px;
        }
    </style>
</head>
<body>
<div></div>
</body>
</html>

效果：

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            border: 10px solid red;
            border-radius: 100px;   
        /*    改成100px*/
        }
    </style>
</head>
<body>
<div></div>
</body>
</html>

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

<style>

        div{
            width: 100px;
            height: 100px;
            border: 10px solid red;
            border-radius: 50px 20px;
        /*    改成100px*/
        }

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

代码实例：

<style>

        div{
            width: 100px;
            height: 100px;
            border: 10px solid red;
            border-radius: 0px 50px 0px 0px;
        /*    有两这个值的时候。即使左上和右下，
        如果是一个值的时候，它就是圆的*/

        /*    改成100px*/
        }
    </style>

在这里插入图片描述

话半圆：

<style>

        div{
            width: 100px;
            height: 50px;
            background: red;
            border-radius: 50px 50px 0px 0px;
        /*    有两这个值的时候。即使左上和右下，
        如果是一个值的时候，它就是圆的*/

        /*    改成100px*/
        }
    </style>

效果：

在这里插入图片描述

下面我们来讲一下阴影：

写代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            border: 10px solid red;
            box-shadow: 10px 10px 10px yellow;
        }
    </style>
</head>
<body>
<div></div>
</body>
</html>

效果：
在这里插入图片描述
红色边框上就有一个黄色的阴影的效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            border: 10px solid red;
            box-shadow: 10px 10px 100px yellow;
        }
    </style>
</head>
<body>
<div></div>
</body>
</html>

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

看代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*div{*/
        /*    width: 100px;*/
        /*    height: 100px;*/
        /*    border: 10px solid red;*/
        /*    box-shadow: 10px 10px 100px yellow;*/
        /*}*/
        img{
            border-radius: 50px;
            box-shadow: 10px 10px 100px yellow;
        }
    </style>
</head>
<body>
<div style="width: 500px;display: block">
<div style="margin: 0 auto"></div>
<img src="images/1.png" alt="">
</body>
</html>

显示结果：
在这里插入图片描述
好了，有关于CSS的圆角边框以及阴影就到这里了，谢谢大家

思诚代码块
关注
  • 7
    点赞
  • 踩
  • 25
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
CSS圆角边框
m0_63639281的博客
07-15 4432
css如何设置圆角边框？css设置圆角边框的方法？
CSS之圆角和阴影
weixin_45604020的博客
06-27 881
在日常生活中我们可以看到很多主流网站都使用了圆角和阴影，目的是为了增加视觉效果，让看起来图片更饱满立体。很多网站的效果图都会设置阴影，这样子不仅显得更有层次而且还添加立体效果。日常生活中我们经常看到头像一般都设置成正圆形状，这样匀称且好看。很多时候我们可以看到许多按钮经常设置成胶囊形状。
CSS中的圆角和阴影
最新发布
小何代码咖啡馆
04-21 1823
在 CSS3 中，新增了圆角边框样式，这样我们的盒子就可以变圆角了。（必需值）水平阴影(horizontal shadow)，可以为负值。（必需值）水平阴影(horizontal shadow)，可以为负值。（必需值）垂直阴影(vertical shadow)，可以为负值。（必需值）垂直阴影(vertical shadow)，可以为负值。（可选值）将外（盒子的背面）阴影改为内（盒子之上）阴影。CSS3 中新增了盒子阴影，可以使用。属性为盒子添加阴影。（可选值）阴影模糊程度。（可选值）阴影模糊程度。
CSS学习13之圆角边框及阴影
ZXS1002的博客
02-16 1663
回顾 盒子模型 盒子模型它的学名为框模型！但是我觉得叫它盒子模型更加贴切，方便理解！ CSS 框模型 所有 HTML 元素都可以视为方框。在 CSS 中，在谈论设计和布局时，会使用术语“盒模型”或“框模型”。 CSS 框模型实质上是一个包围每个 HTML 元素的框。它包括：外边距、边框、内边距以及实际的内容。 圆角边框示例 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"&
CSS3样式详解之圆角、阴影及变形
fusheng_lee的博客
11-29 1719
CSS3样式详解（一），本文的内容主要是圆角样式、阴影样式以及变形样式，在这之中最难的是变形样式
CSS新增样式----圆角边框、盒子阴影、文字阴影
m0_64365419的博客
12-07 1277
在CSS中新增了三个样式，分别是圆角边框，盒子阴影，文字阴影。border-radius属性用于设置元素的外边框圆角语法如下： 原理如下：[椭]圆与边框的交集形成圆角效果。举例：当length为10px时： 显示效果如下：当length为40px时： 由此可见，。方法：如果是正方形，直接将length设置为高度或者宽度的一般即可，或者直接写50%，如果是矩形，设置为高度的一半即可这里我们以将正方形转变为圆形进行举例。举例： 显示效果如下：此外length可以使用一个、两个，四个具体的数值进行替换，一个值--
Web前端开发——CSS3之圆角边框与阴影
wq_ocean_的博客
02-06 1000
目录 1. 内容 2. CSS新特性 3. 浏览器 3.1 浏览器前缀 3.2 浏览器支持度 4.圆角边框border-radius 4.1 基本用法 4.2 案例1 4.2 案例2 4.3 案例3 5.阴影box-shadow 1. 内容 2. CSS新特性 CSS3应用比较多的新特性： 文本的阴影效果； 鼠标悬停动态效果。比如鼠标悬停在图片上可...
CSS-圆角边框
weixin_57936267的博客
05-12 2003
掌握了圆角边框的内容就可以做出类似百度搜索框的效果来 代码： <!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, in.
CSS 边框 阴影 效果
热门推荐
编程之家
08-30 1万+
CSS边框阴影效果实现例子附源码
css3圆角边框和边框阴影示例
09-25
在本文中，我们将深入探讨两个重要的CSS3特性：圆角边框（border-radius）和边框阴影（box-shadow）。 首先，让我们来看看CSS3的圆角边框。在之前的CSS版本中，创建圆角边框需要使用复杂的图片或者JavaScript来实现...
CSS3圆角边框和边界图片效果实例
09-24
主要为大家详细介绍了CSS3边框的不同效果实现代码，包括CSS3圆角边框、盒阴影、边界图片的制作方法，感兴趣的小伙伴们可以参考一下
使用CSS3实现圆角,阴影,透明
09-25
- **边框半径法**：CSS3的`border-radius`属性允许直接设置元素的四个角的圆角半径。这比背景图像法更为直接且易于维护。 ```css .box { border-radius: 1em; } ``` 为了获得跨浏览器兼容性，你需要为Firefox...
关于css3如何实现圆角边框
01-08
在CSS3中，实现圆角边框是一种非常实用且常见的技术，它允许开发者创建更加美观且用户友好的界面。在本文中，我们将深入探讨如何利用CSS3的`border-radius`属性来实现圆角边框，并了解相关的注意事项和扩展应用。 ...
CSS盒子模型、圆角边框、盒子阴影
樱花会有盛开的一天❀
03-03 848
当给一个表格中的单元格与单元格之间的间距设置为0时，由于相邻两个单元格的边框放在了一起，所以会出现这个部分的宽度比设置的一个单元格边框的宽度要大，为了解决这个问题，可以使用border-collapse属性。（4）如果只想设置一个角，可以写为：border-top-left-radius、border-bottom-right-radius等，注意 顺序不能颠倒。网页元素很多带有默认的内外边距，且浏览器不同默认的也不同，因为在布局前，要清除一下网页元素的内外边距。blur：影子的虚实，参数越大，越模糊。
CSS详细基础（七）圆角和阴影
前端，算法，MATLAB，统计学爱好者，目前主攻Web全栈+考研内容
01-30 910
圆角和阴影是CSS3新增的样式。
《web开发： CSS 盒子模型高级特性》
yexiangCSDN的专栏
01-20 193
一、CSS 盒子模型高级特性 1. 圆角边框 在 CSS3 中，新增了圆角边框样式，这样我们的盒子就可以变圆角了 border-radius 属性用于设置元素的外边框圆角 语法： border-radius:length; 参数值可以为数值或百分比的形式 如果是正方形，想要设置为一个圆，把数值修改为高度或者宽度的一半即可，或者直接写为 50% 该属性是一个简写属性，可以跟四个值，分别代表左上角、右上角、右下角、左下角 分开写：border-top-left-radius、bo...
前端必知：24.设置圆角和设置阴影效果
qq_52799985的博客
07-23 3524
设置圆角和设置阴影效果是前端开发中常用的技巧，用于改善界面的外观和提升用户体验。通过灵活运用这些样式技巧，我们可以创造出各种独特和吸引人的界面效果。然而，在使用这些样式技巧时，也需要注意不要过度使用，以免影响用户界面的可读性和可用性。
CSS篇之实现多边形带阴影
ae_pppppp的博客
03-01 405
开发中会有多边形的图片效果，一般我们都会让ui给切图，可是用css我们也可以大致实现效果。
CSS 实现不规则元素的阴影
一只路过的小码农
02-17 636
CSS 实现不规则元素的阴影
echarts图例色块变圆角
06-06
要让echarts图例的色块变成圆角，可以通过设置图例的itemStyle中的borderRadius属性来实现。具体操作如下： ```javascript legend: { data: ['数据1', '数据2', '数据3'], itemWidth: 10, // 图例标记的宽度 itemHeight: 10, // 图例标记的高度 itemStyle: { borderRadius: 5, // 图例标记的圆角大小 } }, ``` 在上面的代码中，我们将图例标记的圆角大小设置为5，这样就能实现将图例的色块变成圆角了。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

思诚代码块

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值