outline实现border-radius效果

最新推荐文章于 2022-05-01 20:41:56 发布
最新推荐文章于 2022-05-01 20:41:56 发布
阅读量5.4k 收藏
点赞数
分类专栏： 网页布局 文章标签： border-radius outline-radius
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wangkadm/article/details/46534899
版权

outline实现border-radius效果



今天发现border-radius不能满足需求,这时候就想到了使用outline实现

但是查了资料,只有firefox支持outline-radius(-mox-outline-radius)

又查了更多资料,终于找到了解决方案


具体实现代码:


box-shadow: 0 0 0 5px rgba(255,255,255,0.3);

5px表示radius

后面的rgba(255,255,255,0.3)表示颜色,我这里用了半透明,也可以是16进制的#FFFFFF



具体资料,我主要是从这里找的

http://www.zhangxinxu.com/wordpress/2015/04/css3-radius-outline/



蓝色的乌鸦
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
利用CSS3实现圆角的outline效果的教程
09-25
本教程将深入探讨如何利用CSS3实现圆角的outline效果，特别适用于创建相框效果。 首先，了解`outline`的基本概念： 1. `outline`与`border`的关系：它们是设计边框的两个不同方法。`outline`和`border`相似，都可以...
解决outline-radius方法
weixin_44463600的博客
08-06 1852
一开始思路是设置轮廓outline，然后设置outline的圆角，后来发现只有在火狐中才能实现-moz-outline-radius。查了资料原来我们也可以用box-shadow来进行投影实现。张鑫旭老师网址：https://www.zhangxinxu.com/wordpress/2015/04/css3-radius-outline/ 想实现一个不断膨胀的五颜六色边的泡泡，还没解决，怕忘记所以...
小tip: CSS3如何实现圆角的outline效果？
03-22 244
byzhangxinxufromhttp://www.zhangxinxu.com本文地址：http://www.zhangxinxu.com/wordpress/?p=4765 一、首先，outline是个很牛逼的东西 温故而知鑫，10年的时候写过一篇可用性方面的文章：“页面可用性之outline轮廓外框的一些研究”，还算挺有用的；3年之后，也就是13年，介绍了个没什么使用价...
Html中的边框弧边,CSS边框属性一---border-radius
weixin_39645019的博客
06-30 3063
1、CSS outline 属性outline (轮廓)是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。p{outline:#00FF00 dotted thick;}2、CSS border-radius 属性border-radius 属性是一个简写属性，用于设置四个 border-*-radius 属性。例子1：一个参数的时候border-radius:2em;等价于bo...
outline 和 border-radius产生的碰撞
weixin_46112649的博客
05-01 503
outline是否会贴合border-radius属性产生的圆角？
《CSS揭秘》边框内圆角
LobsterM的博客
07-30 293
难题 有时我们需要一个容器，只在内侧有圆角，而边框或描边的四个角在外部仍然保持直角的形状，如图： 我们会有常规的标签嵌套方案： 标签嵌套方案 可使嵌套的内标签设置圆角效果，就完成了我们想要的效果。 代码展示： .div1 { max-width: 332px; background: #655; padding: .8em; } .div1>div { max-width: 300px;
CSS3实现多样的边框效果
09-24
通过巧妙地组合和应用`border-radius`、`background-clip`、`box-shadow`和`outline`等属性，我们可以轻松地实现半透明边框、多重边框以及边框内圆角等多种复杂效果。在实际开发中，灵活运用这些技术能够提升用户...
google搜索栏效果实现代码
10-15
border-radius: 4px; } .search-input { width: 100%; padding: 10px; box-sizing: border-box; border: none; border-bottom: 2px solid #ddd; outline: none; } .search-input:focus { border-bottom-...
css+div实现各种常见边框.zip
03-10
通过设置适当的`border-radius`和使用`transform`属性，可以实现曲线或特定角度的边框效果。例如，创建一个左括号形状，可以这样做： ```css .left-bracket::before { content: ""; display: block; width: 0; ...
box-shadow实现outline圆角
aniaocool的博客
05-24 1908
如border有border-radius outline也有outline-radius 但是目前outline-radius只在火狐上有用 其他浏览器都不支持。-moz-outline-radius: 30px;目前可以使用box-shadow来模拟outline圆角效果border-radius: 30%; border: 5px solid red; box-shadow: 0 0 0
CSS3 border-radius 属性和CSS outline 属性
weixin_30699235的博客
11-03 218
CSS3 border-radius 属性 border-radius 属性是一个简写属性，用于设置四个 border-*-radius 属性。 提示：该属性允许为元素添加圆角边框！ 注释：按此顺序设置每个 radii 的四个值。如果省略 bottom-left，则与 top-right 相同。如果省略 bottom-right，则与 top-left 相同。如果省略 top-right，则...
解决input获得焦点时边框没有border-radius
Blog
10-10 4328
.handle-input-search{ /*用id避免自带样式的影响*/ display: inline-block; width: 150px; height: 28px; float: left; margin-left: 8px; border-radius: 4px; padding-left: 10px; border:
input设置圆角边框的相关问题
Milan_KunderLa的博客
04-08 1万+
一般我们在设置了input 或者button的边框属性过后，希望点击过后它的边框依然如我们设定的那样，但是在有些浏览器里面往往还是会有一个默认样式的边框，这使得我们的样式设计变得不是我们想象的那个样子，我遇到过几次，所以这里将解决的方案记下来以供日后查阅1.input设置了border-radius，点击过后还是有一个直角边框？原因及解决方案：input有一个默认的属性outline，这也就是为什...
用JavaScript实现 "outline" 的圆角效果
weixin_30654583的博客
04-24 590
在文本框中，当这个文本框获得焦点的时候，文本框的外围有一个蓝色的框，如图所示。 这个蓝色矩形外框是CSS的一个属性 outline 但是如图中所示，当我们为文本框设置 borde-radius时（目的是为了让其更美观），outline依旧是一个矩形。 这使得文本框获得焦点时非常不美观，在Firefox浏览器中，有outline-radius属性可以设置其圆角，其用法和 b...
输入框圆角
qq_35679291的博客
09-06 2110
首先 说一下input 当鼠标点击输入框的时候 也就获取焦点的时候 input外会出现outline 但是这个outline 没有圆角 不想border有border-radius 这样就出现问题啦 input的border有border-radius 圆角 但是当获取焦点时的outline没有圆角 这样的问题怎么解决呢 ? 往下看 既然outline没有圆角 ,我们就不用它
修改select默认样式,移动端和pc端通用
热门推荐
蓝色的乌鸦的专栏
06-10 1万+
最近在搞前段,发现select样式已经丑到爆了,找了一些资源修改了一下,稍微好了一点.废话不说了,直接上代码 <div class="select" style="margin-top:0;outline:none;border:1px solid #BBBBBB;border-radius:4px;position:relative;"> <select id="orde...
border-radius往外
最新发布
12-09
`border-radius`属性用于设置元素的边框圆角。如果想要将圆角往外扩展，可以使用`outline`属性来实现。具体方法是先设置一个边框，然后再设置一个外边框，最后将外边框的圆角半径设置为比较大的值即可。以下是一个例子： ```html <style> div { width: 100px; height: 100px; border: 1px solid black; border-radius: 10px; outline: 1px solid black; outline-offset: -10px; border-bottom-right-radius: 0; border-bottom-left-radius: 0; } </style> <div></div> ``` 上述代码中，我们先设置了一个宽高为100px的`div`元素，并给它设置了一个1px的黑色边框和10px的圆角。然后，我们再设置了一个1px的黑色外边框，并将它的偏移量设置为-10px，这样就可以让它覆盖在原来的边框之上，并且往外扩展10px。最后，我们将原来边框的右下角和左下角的圆角半径设置为0，这样就可以让外边框的圆角占据整个圆角，从而实现了往外扩展的效果。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值