CSS不使用border创建边框【box-shadow】

已于 2022-05-12 12:47:22 修改
阅读量418 收藏
点赞数
文章标签： css css3 html
于 2022-05-11 23:19:06 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/bidepanm/article/details/124721576
版权

box-shadow: x轴偏移 y轴偏移 模糊半径 扩散半径 颜色 [inset内阴影]

box-shadow: 0 0 0 5px #000;

类似于相框的双层边框效果：
box-shadow: 0 0 0 10px #123,
0 0 0 30px #fff,
-40px -40px #234,// 左上角边框
40px 40px #345; // 右下角边框

bidepanm
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
css多重效果,css奇技淫巧—box-shadow与outline绘制多重边框效果
weixin_39996141的博客
08-03 480
css语法：box-shadow: h-shadow v-shadow blur spread color inset;注释：box-shadow 向框添加一个或多个阴影。该属性是由逗号分隔的阴影列表，每个阴影由 2-4 个长度值、可选的颜色值以及可选的 inset 关键词来规定。省略长度的值是 0。值描述测试h-shadow必需。水平阴影的位置。允许负值。v-shadow必需。垂直阴影的位置。允...
css不使用border创建边框
weixin_44995917的博客
06-28 447
box-shadow详解 box-shadow：x轴偏移 y轴偏移 模糊半径 扩散半径 颜色 inset(内阴影) 要求：点击表单时，显示边框 <form action=""> <input type="text" placeholder="请输入内容"> input{ border: none; outline: none; border-bottom: 1px solid burlywood; padding-b
css 给盒子加阴影边框
最新发布
pig_ning的博客
07-25 992
css 给盒子加阴影边框
不用css，实现带细线灰色边框的表格
gooapple的专栏
10-13 2752
“带很细边框线的表格” 第一列 第二列 第三列 第一列 第二列 第三列
css box-shadow知识点及多重边框
xiaozhen0610的博客
07-01 389
box-shadow（） 参数： h-shadow:水平阴影的位置。允许负值。 v-shadow:垂直阴影的位置。允许负值。 blur:模糊距离。 spread:扩张半径（可正可负。投影面积则可大可小） color：阴影颜色 inset:将外部阴影 (outset) 改为内部阴影。 　IE9+、Firefox 4、Chrome、Opera 以及 Safari 5.1.1 支持 box-shadow 属性。 小应用：多重边框 box-shadow方案 一个正值的扩张半径加上水平、垂直为0的偏移量和为0的模.
CSS阴影效果的比较之drop-Shadow与box-Shadow
12-14
drop-shadow与box-shadow都是阴影效果（光晕效果）的css属性，二者最大的不同点在于：box-shadow只能制作矩形的阴影，而drop-shadow则可以制作和物件不透明区域完全相同形状的阴影。底下是二个css属性的用法： ....
CSS3属性box-shadow使用指南
01-19
今天比较忙，没能好好看新东西，就记录一个常用的CSS3属性吧：box-shadow，表示阴影，如果设置了border-radius圆角，则阴影也是圆角 box-shadow目前是IE9及以上和其他现代浏览器都支持的属性了。 语法： Formal ...
CSS3基础(RGBa、text-shadow、box-shadow、border-radius)
12-13
RGBa前三个值是RGB色值，最后一个值是十进制的alpha不透明度值（0=透明，1=不透明）CSS 3 RGBa实现半透明背景RBGa可以用于任何更颜色相关的属性，例如字体颜色、边框颜色、背景颜色、阴影颜色等。RGBa可以应用在所有...
不用css 美化输入框的方法
qq_36454619的博客
12-18 177
之前一直觉得好看的前端效果需要用css排出来 论坛里的这个回答让我看到了新角度 话不多说打开画图工具 （未完待续…）
css 边框属性、盒子阴影和文字阴影相关设置和内外边距
qq_57423665的博客
04-13 1024
对于两个嵌套关系(父子关系)的块元素,父元素有上外边距同时子元素也有上外边距,此时父元素会塌陷较大的外边距值。border可以设置元素的边框。边框有三部分组成边框宽度(粗细)、边框样式、边框颜色。在CSS3中,新增了圆角边框样式,这样我们的盒子就可以变圆角了。margin属性用于设置外边距,即控制盒子和盒子之间的距离。padding属性用于设置内边距,即边框与内容之间的距离。border-radius属性用于设置元素的外边框圆角。CSS边框属性允许你指定一个元素边框的样式和颜色。内边距、外边距合并塌陷问题
除了border，还可以使用box-shadow生成边框
Spider--Man
03-30 1931
<html> <head> <style> .border{ background: blue; width: 200px; height: 200px; box-shadow: 0 0 0 20px #655, 0 0 0
css textbox 边框去掉_CSS的box-shadow创建边框，实现一个相框效果，会了吗
weixin_39533174的博客
11-27 504
box-shadow最常见的用法：box-shadow : x轴偏移 y轴偏移 颜色如果提供第三个和第四个可选值box-shadow : x轴偏移 y轴偏移 模糊半径 扩散半径 颜色内阴影：inset（可选值）因为box-shadow本来用于展现阴影，因此可以有外阴影和内阴影box-shadow : x轴偏移 y轴偏移 模糊半径 扩散半径 颜色 inset栗子一：下面这个输入框非常常见：<我...
使用box-shadow设置边框
qq_39272523的博客
10-15 1150
box-shadow 的最低要求属性是 x 和 y 轴的值以及颜色： box-shadow: 5px 8px black; 可以选择添加第三个参数 blur 来制造模糊，第四个参数 spread 来添加模糊扩散程度。 要使用它来创建边框，我们将 x 轴和 y 轴的值以及 blur 都设置为 0 ，然后为spread设置一个正数。 box-shadow: 0 0 0 3px blue; 这将在元素周围创建边框的外观，甚至可以遵循所应用的 border-radius： 何时使用box-shadow 您可能
你所不知道css世界的border属性
feizhong_web的博客
06-22 424
border就是边框，但是衍生出来的特性可以解决很多棘手的问题，在图形构建、体验优化以及网页布局作用巨大，同时能保证良好的兼容性和稳定性。1.border-width属性thin：薄薄的，等同于1pxmedium(默认值)：薄厚均匀，等同于3pxthick:厚厚的，等同于4px2.利用color计算值作为边框颜色这个可以取代border-color,用来做一些很有用的实践，比如我们在上传图片的时候...
box-shadow:单边阴影与多边阴影
weixin_56025182的博客
08-04 8153
默认阴影尺寸为0px，可为负数（阴影块默认与盒子同大小，阴影块大小=盒子大小+阴影尺寸），例：阴影尺寸为2px，则四边同时+2px。水平向右移动10px,垂直向下移动10px,显示右边与下边阴影。水平向左移动10px,垂直向上移动10px,显示左边与上边阴影。水平向右移动10px,垂直向下移动10px,显示左边与上边阴影。水平向左移动10px,垂直向上移动10px,显示右边与下边阴影。垂直方向向下移动10px，只显示下边阴影。垂直方向向下移动10px，只显示上边阴影。外部阴影只会在外侧，被遮挡部分不显示；.
css添加边框阴影上、下、左、右详解
热门推荐
小傲哥哥的博客
03-09 4万+
box-shadow: 2px 2px 2px #E5E5E5, -1px -1px 1px #E5E5E5; // 给多个边框添加阴影效果
css画三角形不用边框,CSS 实现三角形，非 Hack
weixin_42128015的博客
08-04 637
写过 HTML upvote arrow(向上箭头)，speech bubble(对话气泡)或其他类似的尖角元素的人都知道，为了创建一个纯 CSS 实现的三角形，必须使用某些 Hack。最流行的两种方式是通过 边框实现，或 Unicode 字符。不得不说，这些 CSS Hack 都非常聪明，但它们却算不上好的解决方案，代码不优雅且不够灵活。例如，我们无法在三角形上使用背景图片，因为边框和字符只能使...
CSS3边框及盒子阴影
weixin_68485297的博客
04-04 4350
一、CSS3边框 1、border-radius 圆角边框 按照顺时针的顺序去设置 左上角，右上角，右下角，左下角 ，值越大，圆角越圆。 ①设置一个值，四个圆角同时变化 ②设置两个值，第一个值为左上、右下圆角的值，第二个值为右上、左下圆角的值 （🔺 是对角关系） ③设置三个值，第一个值为左上圆角的值，第二个值为右上、左下圆角的值 ，第三个值为右下圆角的值 ④设置四个值，按照左上、右上、右下、左下的顺时针顺序 ⑤圆形 利用border-radius属性制作圆...
CSS——box-shadow做一个border：solid 效果
HarryHY的博客
10-25 1720
由于在查bug的时候发现了使用border会出现样式的小bug ——由于border会占据盒模型的长高 突然想到不如用box-shadow做一个border的样式 CSS:——border border:1px solid #0cbbea; CSS3：——box-shadow box-shadow:0 0 0 1px #0cbbea; 语法如下 box-shadow: h-shadow v-s...
css悬浮边框加粗 box-shadow
05-23
可以使用CSS中的:hover伪类和box-shadow属性来实现悬浮边框加粗效果。具体示例如下： ```css .box { border: 1px solid #ccc; box-shadow: 0 0 0 2px #ccc; /*设置默认边框和阴影*/ transition: box-shadow 0.3s...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值