实现边框透明,安卓手机头像圆形不识别%;利用样式实现”>“符号,以及tips符号的实现方法,以及粘性定位position:sticky用法

这篇博客介绍了如何在安卓设备上实现边框透明,利用CSS3的RGBA颜色值避免透明度继承问题,并展示了创建圆形头像的技巧。此外,还分享了使用伪元素`:after`和`transform`制作向右箭头符号以及tips符号的实现方法,以及讲解了CSS粘性定位`position:sticky`的用法和浏览器兼容性。
摘要由CSDN通过智能技术生成

如下图要实现边框是透明的情况:

透明往往能产生不错的网页视觉效果,先奉上兼容主流浏览器的CSS透明代码:

.transparent_class {
	filter:alpha(opacity=50);
	-moz-opacity:0.5;
	-khtml-opacity: 0.5;
	opacity: 0.5;
}

上面的几个属性分别是:

  • opacity: 0.5; 这是最重要的,因为它是CSS标准.该属性支持Firefox, Safari和 Opera.
  • filter:alpha(opacity=50); 这个是为IE6设的,可取值在0-100,其它三个0到1.
  • -moz-opacity:0.5; 这个是为了支持一些老版本的Mozilla浏览器。
  • -khtml-opacity: 0.5; 这个为了支持一些老版本的Safari浏览器。

CSS透明度继承问题

但CSS的透明属性涉及到一个继承问题,当为父级元素设置透明度后,子元素将自动继承其透明度。

所以比较好的解决方法是:background: rgba(255,255,255,.3)

RGBa是一种在CSS中声明包含透明效果的颜色的方法,通过RGBa,我们可以将一个元素设置为透明,而不会影响其子元素

CSS3 颜色值RGBA表示方式

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值