css重点10：透明边框和透明小圆

最新推荐文章于 2024-01-15 11:11:39 发布
最新推荐文章于 2024-01-15 11:11:39 发布
阅读量569 收藏
点赞数
分类专栏： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42129553/article/details/105904260
版权
css 专栏收录该内容
41 篇文章 3 订阅 ¥19.90 ¥99.00
订阅专栏
本文介绍了如何使用CSS实现图片两侧的透明圆框效果，通过设置绝对定位、border-radius属性来创建半圆或整圆，并讨论了如何创建多个透明小圆点，利用li元素和width、height及border-radius属性。同时，提供了透明边框（使用rgba()函数）和透明背景的代码示例。
摘要由CSDN通过智能技术生成

1、实现图片左右两边的透明圆框

1）首先将这个盒子设置为绝对定位（因为绝对定位不占位置，可以覆盖在其他的表面），父亲设置相对定位
2）一般圆框是半圆的。如果想要整圆：border-radius: 50%；
如果不是整圆（border-radius有顺序：左上角、右上角、右下角、左下角）

2、如果想要多个小圆
1）ul>li的组合
2）要给定li的width和height，然后border-radius: 50%；
可以设置白色边框，或者透明背景

3、源码：

<!DOCTYPE html>
<html lang="en">
<
了解本专栏 订阅专栏 解锁全文
小黄呀呀呀
关注
专栏目录
订阅专栏
css新增：透明、伪类、阴影、边框圆角--第十三天
qdcxy_lj的博客
03-09 1195
css新增：透明、伪类、阴影、边框圆角--第十三天
css实现凹圆圈，小透明
Minyoung 的博客
05-24 2975
先来效果图 实现优惠券的方式来展示，直接上代码，css我用了less .coupons{ width: 100%; height: 100px; margin: 15px 0; position: relative; display: flex; justify-content: space-between; ...
CSS透明效果总结
楚小狂
03-24 3196
如果网页中加入透明效果，即美观又漂亮，使用户的体验度提升很多，这次上海网站设计公司为您讲述该怎么样实现CSS的透明效果，以及使CSS技术兼容您的所有浏览器。 关于CSS 透明度，有一点需要注意的是，它虽然使用了很多年，但它一直以来都不是一个标准属性。它是一种非标准技术，应该是CSS3规范的一部分。 一、旧的Opacity设置 以下代码是Firefox和Safari旧版本所需的
css 实现卡片双侧镂空半圆
yezi_12345的博客
04-03 469
css 侧边镂空
css3小球坠落,CSS3 Ball Shadow（小球的阴影）
weixin_39948210的博客
08-03 187
CSS语言：CSSSCSS确定.wrapper {position: relative;width: 600px;margin: 10px auto;}.man {width: 640px;}#ballWrapper {width: 80px;height: 550px;position: absolute;left: 45%;top: 0px;transform: scale(1);transi...
不要图片？CSS实现圆角边框渐变色+背景透明
苏苏就是小苏苏的博客
06-04 1万+
👏不要图片？CSS实现圆角边框渐变色+背景透明，最近在工作中常常实现这些效果，速速来Get吧~🥇文末分享源代码。苏苏的bug。
纯CSS3圆形边框光环动画特效
06-24
总结起来，"纯CSS3圆形边框光环动画特效"是通过巧妙地使用@keyframes规则和CSS3的动画属性实现的。它不仅展示了CSS3的强大功能，还提供了一种优雅的方式来增强网页的视觉效果，特别是当需要动态展示焦点或强调某些...
使用CSS3实现圆角,阴影,透明
09-25
在本文中，我们将深入探讨如何使用CSS3来实现圆角、阴影和透明效果，这些都是现代网页设计中不可或缺的元素。 1. **圆角** CSS3通过`border-radius`属性引入了创建圆角的能力，极大地简化了以前需要借助图片或复杂...
`CSS`----盒子中间透明圆形并设置旋转效果
最新发布
weixin_46561899的博客
01-15 587
`CSS`----盒子中间透明圆形并设置旋转效果
每天坚持一个css-圆与边框（border）
weixin_34261739的博客
09-17 394
每天坚持一个CSS 实现效果： 代码 html: <div id="box"> <div class="circle-out"> <div class="circle-inner"> </div> </div> <div clas...
css空心圆代码,透明空心或切圆圈
weixin_36339710的博客
08-04 3335
您可以使用两种不同的技术实现透明切割圆：1.SVG以下示例使用内联svg。第一个片段使用蒙版元素剪切透明圆圈，第二个空心圆圈使用路径元素。圆圈由2个弧命令组成：使用mask元素：body{background:url('https://farm9.staticflickr.com/8760/17195790401_ceeeafcddb_o.jpg');background-size:cover;}...
css：设置div边框透明+渐变
weixin_30793643的博客
01-15 2266
写作背景： 　　觅兼职--登陆页面，UI给的原型图很漂亮，其中有一个图要求div外面有一圈透明度为0.37且带有渐变的边框。效果图如下： 　　在写的时候遇到了一点小小的问题：无法给同一个div设置圆角的透明+渐变边框。但是，又不能不做是不是，费了一番心思查资料，下面是解决方案： 　　1、分成两个div叠加的形式 <!DOCTYPE html> &l...
css指定位置画圆,如何用css在矩形的某个位置裁出一个透明的圆？
weixin_30575517的博客
08-03 951
使用radial-gradient可以实现，我只管实现不管兼容性，兼容方案可以搜这个属性，加上兼容前缀之类的/* css部分 */body{background:#F0AE80}.a{/*用于实现缺口那的阴影，用box-shadow缺口那会有问题*/filter:drop-shadow(1px 1px 5px #000);}.b{width:200px;height:100px;/*通过radia...
html 透明的圆形,用CSS3剪出透明圆圈
weixin_28868927的博客
06-15 717
可以使用框阴影仅使用CSS制作剪切圆。以下演示具有固定的高度/宽度，但可以使用百分比大小获得相同的输出，从而使其响应：DEMO输出：body{background:url(http://lorempixel.com/output/people-q-g-640-480-7.jpg);background-size:cover;}div{width:600px; height:350px;overfl...
前端学习（943）：动态生成小圆圈
歌谣的博客
04-24 734
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Documen...
css设置透明的border
树上骑个猴的博客
04-08 9682
.container{ background-color: black; border: 1px solid;/*设置透明边框*/ }
CSS中间圆形镂空效果
热门推荐
lyx2049的博客
10-15 1万+
实现效果：一个div中间圆形镂空 思路：在div中用:after伪类实现一个圆环，再设置div的overflow为hidden<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Examples</title> <style> .hole { width: 160px; height: 160px; position:
【css3】径向渐变实现任意大小背景圆点
haolangtaiye的博客
09-30 912
实现原理 使用透明色紧接透明色的渐变即可实现圆点 渐变半径刚好为背景大小一半时，圆点刚好填满背景大小，即 71% （1 / √2 ≈ 0.71） .point-bg { background-image: radial-gradient(red 71%, transparent 0); background-size: 100px 100px; background-repeat: no-repeat; } 结果如下 tips: 渐变函数生成的结果等同于图片，
css 圆形渐变透明边框
06-09
要实现CSS圆形渐变透明边框，可以使用CSS的linear-gradient()函数和border-radius属性。以下是一个例子： ``` div { width: 200px; height: 200px; border-radius: 50%; background: linear-gradient(45deg, transparent 50%, #fff 50%), linear-gradient(135deg, transparent 50%, #fff 50%), linear-gradient(225deg, transparent 50%, #fff 50%), linear-gradient(315deg, transparent 50%, #fff 50%); background-size: 50% 50%; background-position: top left, top right, bottom right, bottom left; background-repeat: no-repeat; } ``` 在这个例子中，div元素被设置为一个200像素的圆形，使用border-radius属性。background属性使用四个线性渐变，每个渐变都是从透明到白色的。渐变的方向是45度、135度、225度和315度。background-size属性设置渐变的大小为50% 50%，background-position属性设置渐变的位置，background-repeat属性设置不重复渐变。这将创建一个圆形渐变透明边框。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

小黄呀呀呀

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

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

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

打赏作者

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

抵扣说明：

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

余额充值