css制作磨砂图片(CSS制作梦幻彩虹效果)
类别:Web前端 浏览量:2786
时间:2022-01-18 01:41:59 css制作磨砂图片
CSS制作梦幻彩虹效果今天看到一篇文章,说到margin的塌陷的问题,并提供了好几个例子。
自己之前还没怎么遇到过这个问题,正好来研究一下。
- <li class="box1"></li>
- <li class="box2"></li>
- <li class="box3"></li>
- <li class="box4"></li>
css样式一,使用margin塌陷:
- .box1, .box2, .box3 {
- width: 200px;
- }
- .box1{
- margin-bottom: -80px;
- height:100px;
- background: blue;
- }
- .box2 {
- margin-bottom:-40px;
- height:60px;
- background: #ffff00;
- }
- .box3{
- height:20px;
- background: #ff0000;
- }
效果:
css样式二,也是使用的margin塌陷,不过做出来的是弧形的彩虹:
- .box1{
- width: 400px;
- height: 200px;
- overflow: hidden;
- }
- .box1::before{
- float: left;
- display: block;
- height: 400px;
- width:400px;
- border-radius: 100%;
- border: solid 10px blue;
- box-sizing: border-box;
- content: "";
- }
- .box1::after{
- margin-top: 10px;
- margin-left: 10px;
- display: block;
- width: 380px;
- height: 380px;
- border: solid #ffff00 10px;
- border-radius: 100%;
- box-sizing: border-box;
- content: "";
- }
- .box2{
- float: left;
- margin-top: -180px;
- margin-left: 20px;
- width: 360px;
- height: 180px;
- overflow: hidden;
- }
- .box2::before{
- float: left;
- display: block;
- margin: 0;
- width: 360px;
- height: 360px;
- border-radius: 100%;
- border: solid 10px #ff0000;
- box-sizing: border-box;
- content: "";
- }
- .box2::after{
- display: block;
- margin-top: 10px;
- margin-left: 10px;
- width: 340px;
- height: 340px;
- border-radius: 100%;
- border: solid 10px #ffff00;
- box-sizing: border-box;
- content: "";
- }
- .box3{
- margin-top: -160px;
- margin-left: 40px;
- width: 340px;
- height: 160px;
- overflow: hidden;
- }
- .box3::before{
- float: left;
- display: block;
- width: 320px;
- height: 320px;
- border: solid 10px blue;
- border-radius: 100%;
- box-sizing: border-box;
- content: "";
- }
效果:
css样式三,使用的是box-shadow:
- .box4{
- width: 200px;
- height: 200px;
- box-shadow: 0 10px 0 red,0 20px 0 yellow, 0 30px 0 green,0 40px 0 blue,0 50px 0 purple;
- }
效果:
CSS样式四,使用position:absolute来实现,感觉这种是最常见的了
- .box1{
- position: absolute;
- width: 200px;
- height: 100px;
- background: #008aff;
- }
- .box2{
- position: absolute;
- margin-top: 20px;
- width: 200px;
- height: 60px;
- background: #ffff00;
- }
- .box3{
- position: absolute;
- margin-top: 40px;
- width: 200px;
- height: 20px;
- background: #ff6633;
- }
效果:
CSS样式五,使用radial-gradient:
- .box4{
- width: 260px;
- height: 130px;
- overflow: hidden;
- }
- .box5{
- width: 260px;
- height: 260px;
- border-radius: 100%;
- background: radial-gradient(#ffffff 70px,#ff6633 80px,#ffff00 90px,green 100px,#008aff 110px,purple 120px);
- background: -moz-radial-gradient(#ffffff 70px,#ff6633 80px,#ffff00 90px,green 100px,#008aff 110px,purple 120px);
- background: -webkit-radial-gradient(#ffffff 70px,#ff6633 80px,#ffff00 90px,green 100px,#008aff 110px,purple 120px);
- }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持开心学习网。
您可能感兴趣
- css怎么设置div边框(div+css实现带箭头的面包屑导航栏)
- css3弹性盒模型常用属性(CSS3弹性盒模型开发笔记三)
- css3边框阴影的属性(css3 border-radius属性详解)
- html5表单实例(使用HTML5和CSS3表单验证功能)
- 怎么写css效果最好(提高CSS代码效率的编写技巧)
- 自制cssdiv导航栏(css利用transform skewX制作平行四边形导航菜单)
- css43个基本技巧(必须掌握10个非常不错的CSS技巧)
- css的字体大全(CSS 常用中文字体 Unicode 编码表)
- css代码使用方法(写出牛逼的CSS代码13条建议你会哪几条)
- css 自适应手机屏幕(Css实现手机端页面强制横屏的方法示例)
- css的五种基本选择器(CSS兼容问题之HACK技术)
- css图片3D效果(用CSS实现图片的3D凹凸感凸出镜框外或凹陷镜框里)
- css sprites介绍
- filter的用法css(CSS filter 有什么神奇用途)
- css实现很炫酷的效果(纯CSS实现酷炫的霓虹灯效果附demo)
- CSS中常用的几个技巧
- 越南没事(越南没事情做)
- 重庆旅游攻略(重庆旅游3-4天攻略最佳线路)
- 周杰伦演唱会门票(周杰伦演唱会门票多少钱一张2023)
- 焕然一新 成都轨道集团官方网站改版上线(成都轨道集团官方网站改版上线)
- 成都轨道交通19号线二期全线电通(成都轨道交通19号线二期全线电通)
- 19号线二期全线电通 轨道交通项目最新进展来了(19号线二期全线电通)
热门推荐
- 防火墙如何设置ftp连接(浅谈防火墙对FTP的影响及故障排除分析)
- apache静态化怎么用(apache中访问不了伪静态页面的解决方法)
- serv文件怎么复制到ftp服务器上(用Serv-U架设FTP服务器的方法与设置方法)
- thinkphp5设计权限(Thinkphp5.0 框架视图view的比较标签用法分析)
- 前端表单验证(AmazeUI的JS表单验证框架实战示例分享)
- docker查看挂载目录(docker-修改容器挂载目录的3种方法小结)
- react组件分析(react-diagram 序列化Json解读案例分析)
- html5发送文字特效(HTML5调用手机发短信和打电话功能)
- python对字典值排序(Python实现字典按key或者value进行排序操作示例sorted)
- linux负载均衡(深入理解Linux负载均衡LVS)