5.1 CSS3圆角边框与阴影

最新推荐文章于 2022-10-26 23:22:08 发布
最新推荐文章于 2022-10-26 23:22:08 发布
阅读量153 收藏
点赞数
分类专栏： # CSS # web前端设计与开发 # HTML基础 文章标签： css3 css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zjj8008120308/article/details/120092453
版权
本文详细介绍了CSS3中的圆角边框border-radius属性，通过实例展示了如何设置不同情况下的圆角，以及如何实现阴影效果box-shadow。内容包括边框圆角的四个子属性设置和阴影的五个参数解释，帮助读者掌握创建美观界面的技巧。
摘要由CSDN通过智能技术生成

CSS3

5.1圆角边框与阴影
圆角边框border-radius

四个子属性
每个属性的取值是这样的：如果是两个值的情况，就表示一个是水平方向的值，一个是垂直方向的值；如果是一个值的情况，就表示水平方向和垂直方向的值相等。

在这里插入图片描述
在这里插入图片描述

border-radius：25px；由于盒子本身的高度是50px，25px正好是高度的一半，所以添加的圆角相当于上下左右四个角的水平方向和垂直方向上都是25px，这样就出现左右两边是半圆的情况，如下图。
在这里插入图片描述

阴影box-shadow

在这里插入图片描述
阴影box-shadow，5个值， inset可选，无默认outset
在这里插入图片描述
在这里插入图片描述

小昔超厉害
关注
专栏目录
CSS3-边框-外轮廓-文本-渐变-WEB字体
weixin_57218747的博客
04-30 721
边框-外轮廓-文本-渐变-WEB字体 1 回顾 1.1 基本语法 新增的长度单位： rem、vw、vh、vmax、vmin 新增的颜色设置方式： rgba()、hsl()、hsla() 1.2 选择器 1. 基本选择器 标签名 类名 ID名 全局 并集： div,p,h1 {} 交集： p.item {} 2. 层级选择器 后代元素选择器 空格 子元素选择器 > 选择紧邻在后面的一个兄弟元素 + 选择后面所有的兄弟元素
08.CSS3选择器、边框、背景、按钮
weixin_60806359的博客
11-21 454
CSS3概述 CSS3简介 如同人类的的进化一样，CSS3是CSS2的“进化”版本，在CSS2基础上，增强或新增了许多特性， 弥补了CSS2的众多不足之处，使得Web开发变得更为高效和便捷 动画 圆角 阴影 边框图片 … CSS3现状 1、浏览器支持程度差，需要添加私有前缀 -webkit- 谷歌 safari -moz- 火狐 -ms- IE 2、移动端支持优于PC端 3、不断改进中 4、应用相对广泛 CSS3选择器 CSS3新增了许多灵活查找元素的方法，极...
CSS3 box-shadow 属性
WhoWrongsWhere的专栏
05-23 675
实例 向 div 元素添加 box-shadow： div { box-shadow: 10px 10px 5px #888888; } 定义和用法 box-shadow 属性向框添加一个或多个阴影。 提示：请使用 border-image-* 属性来构造漂亮的可伸缩按钮！ 默认值：none 继承性：no 版本：CSS3 JavaScr
CSS3 (边框 圆角 阴影）
sure_viola的专栏
04-22 589
border-radius    用于创建圆角
CSS3边框样式 圆角、边框图片、边框阴影-来自三人行慕课
weixin_44424187的博客
05-22 222
原文链接：https://www.3mooc.com/front/articleinfo/229 CSS3的边框圆角、边框阴影属性，应用十分广泛，兼容性也相对较好，具有符合渐进增强原则的特征，我们需要重点掌握。 边框圆角border-radius 圆角处理时，脑中要形成圆、圆心、长半径、短半径的概念，正圆是椭圆的一种特殊情况。 可分别设置长、短半径，以“/”进行分隔，遵循“1，2，3，4”规则，参...
Web前端开发——CSS3之圆角边框与阴影
wq_ocean_的博客
02-06 1224
目录 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应用比较多的新特性： 文本的阴影效果； 鼠标悬停动态效果。比如鼠标悬停在图片上可...
CSS3基础：圆角边框，阴影
qq_54517101的博客
08-05 124
数字表示的是圆角的半径也可以分开设置，顺序为左上角，右上角，右下角，左下角。
CSS3边框与阴影
CSS3边框与阴影是一种在网页设计中常用的样式效果，通过使用CSS3的边框与阴影属性，可以为元素添加各种边框和阴影效果，以增强页面的美观度和层次感。 CSS3边框与阴影使用简单，通过添加少量的样式代码就可以轻松...
css3边框、阴影与圆角效果的实现
# 第一章：CSS3边框的基本概念 ## 1.1 边框的作用和意义 边框在页面设计中起着非常重要的作用，它可以用于装饰元素、突出元素或者为元素提供更清晰的界限。通过CSS3边框样式，我们可以轻松地实现各种边框效果，从...
html5与css 动手5.1
10-11
- **边框和背景**：圆角边框`border-radius`、阴影`box-shadow`、背景渐变`background-image: linear-gradient()`等效果让设计更加丰富多彩。 - **响应式布局**：媒体查询`@media`允许根据设备的不同特性来调整...
CSS3——圆角边框与阴影
One of thre_tigers的博客
01-11 620
CSS3相对于CSS添加了许多新的特性，包括圆角边框与阴影，文字文本，2D变换，过度与动画，3D变换等等。在介绍新的特性之前，我们先聊一聊对于新特性不同的浏览器厂家的支持度以及通过添加前缀解决： 浏览器内核 浏览器 CSS3前缀 Webkit SafariChrome -webkit- Gecko Firefox ...
CSS圆角及边框阴影
HurtSomebody的专栏
11-27 2563
css圆角 给要设置圆角边框的对象设置css样式。如下(IE9，火狐，Chrome均可以)，注意先后顺序 -moz-border-radius:5px; -khtml-border-radius:5px; -webkit-border-radius:5px;border-radius:5px; css边框阴影 .mydiv{ width:250px;height:auto;bor
CSS3(1)---圆角边框、边框阴影
爱无止
12-13 454
CSS3(1)---圆角边框、边框阴影宠文 www.shupu.org CSS3可以简单理解成是CSS的增强版，它的优点在于不仅有利于开发与维护，还能提高网站的性能。 一、圆角边框 圆角在实际开放过程中，还是蛮常见的。以前基本是通过背景图片做的，有了CSS3后可以使用简单的属性搞定，可以通过border-radius设置元素的圆角半径。 1、圆角边框语法 圆角边框属性 : border-...
CSS3——圆角、阴影
Alice__97的博客
06-26 268
1、新特性浏览器支持 浏览器内核 浏览器 CSS3前缀 Webkit Safari、Chrome -webkit- Gecko Firefox -moz- Presto Opera -o- Trident IE -ms- 2、圆角边框border-radius 分为...
CSS深入基础篇---圆角边框, 阴影(8)-CSS3新增
IDApprentice的博客
02-27 245
圆角边框(重点) border-radius属性用于设置元素的外边框圆角 语法: border-radius: 数值(像素单位);
Web前端入门（十八）圆角边框及盒子阴影
treesorshining的博客
10-26 2391
半径（圆的半径） 原理:(椭）圆与边框的交集形成圆角效果 参数值可以是数值或百分比的形式 如果是正方形盒子，想要设置为一个圆，把数值修改为高度或者宽度的一半即可，或者直接写为50% 如果是一个矩形，设置为高度的一半就可以（圆角矩形效果） 该属性是一个简写属性，可以跟四个值，分别代表左上角，右上角，右下角，左下角 2.盒子阴影 CSS3 中新增了盒子阴影，可以使用 box-shadow 属性为盒子添加阴影。 值 描述 h-shadow 必需。水平阴影的位置，允许负值。阴影正值往右移动
CSS3 阴影与圆角边框
banchi6453的博客
08-02 178
㈠css3的新特性实际应用 ⑴文本阴影效果，用代码编写的方式实现 ⑵鼠标悬停的动态效果 左侧三幅图片，上面初始状态是没有说明文本的，但把鼠标放在上面的时候，这个图片上面就出现了说明文字 ⑶分栏分列式排版：类似于报刊的排版方式 ⑷做一个盒子它的圆角边框，还可以做一个盒子的阴影效果，若干个盒子的旋转效果 ㈡浏览器 w3c制定标准标准慢，...
html 画圆的阴影,CSS3(1)---圆角边框、边框阴影
weixin_42566424的博客
06-17 1141
圆角边框、边框阴影CSS3可以简单理解成是CSS的增强版，它的优点在于不仅有利于开发与维护，还能提高网站的性能。一、圆角边框圆角在实际开放过程中，还是蛮常见的。以前基本是通过背景图片做的，有了CSS3后可以使用简单的属性搞定，可以通过border-radius设置元素的圆角半径。1、圆角边框语法圆角边框属性 : border-radius属性值border-radius: 属性1，属性2，属性3，...
css如何实现边框圆角阴影,css3圆角边框和边框阴影示例
weixin_36192665的博客
08-04 549
border-radius向元素添加圆角边框，css3中的。ie9+ chrome safari5+ firefox4+ 现在都支持。可以向input div等设置边框。与border相似，可以四个角一起设置，也可以单独设置。语法：复制代码代码如下:border-radius: 1-4 length|% / 1-4 length|%;-moz-border-radius:10px;支持旧的fire...
CSS3线性渐变详解：创建与应用教程
CSS3渐变技术是现代Web设计中的一种强大工具，它提供了在两个或多个颜色之间创建平滑过渡的能力，无需依赖图像资源，从而提高了页面性能和用户体验。本文主要聚焦于CSS3线性渐变，这是一种常用的渐变类型，它支持从...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

小昔超厉害

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

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

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

打赏作者

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

抵扣说明：

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

余额充值