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设置字体
- h5css3图片旋转(怎样实现H5+CSS3手指滑动切换图片的示例代码)
- css3中过渡动画的属性(css3 中实现炫酷的loading效果)
- css3颜色详解(CSS3混合模式mix-blend-mode/background-blend-mode简介)
- css可以控制网页背景图片吗(CSS实现网页背景图片自适应全屏的方法)
- css3导航菜单(CSS3实现的侧滑菜单)
- css时钟(网页中时光轴CSS实现)
- css中三角标(使用css实现三角符号效果)
- css中有几种样式表(深入浅出学习层叠样式表--css推荐)
- css三栏布局详解(CSS三列布局的多种表现形式)
- 微信小程序图片加特效(微信小程序实现可实时改变转速的css3旋转动画实例代码)
- css文字图片垂直居中对齐(CSS设置文字图片垂直居中的方法总结)
- css如何设置简写代码(10个CSS简写/优化技巧整理)
- css如何定义行级元素宽度和高度(CSS块级元素与行级元素详解)
- css3按钮闪烁(纯CSS3代码实现switch滑动开关按钮效果)
- css选择器优先级
- 《寄生虫》 三观不正 人类悲欢从来不相通,感同身受也并非本能(寄生虫三观不正)
- 这部动漫中的女孩子,可比101女孩更加励志(这部动漫中的女孩子)
- 《白狐的人生》热拍 贾征宇偶像包袱难自弃 图(白狐的人生热拍)
- 七夕取消了,牛郎织女没做核酸七夕已经取消(牛郎织女没做核酸七夕已经取消)
- 网友抵制 多地取消 夏日祭 为何惹众怒(网友抵制多地取消)
- 兄弟萌,今年的七夕又取消了 思考 思考(今年的七夕又取消了)
热门推荐
- elasticsearch docker(在Docker中安装Elasticsearch7.6.2的教程)
- dedecms标签缩略图问题(dedecms文章内页获取缩略图的调用标签)
- 游标和sql语句区别(详解SQL游标的用法)
- UrlHelper、HtmlHelper的使用
- mysql大表查询优化方案(mysql查询优化之100万条数据的一张表优化方案)
- sql server 视图操作(Sql Server 视图数据的增删改查教程)
- 免备案服务器云服务器(香港免备案云服务器的优势有哪些?)
- javascript构造重复数组(JavaScript平铺数组转树形结构的实现示例)
- php面向对象怎么用(PHP面向对象程序设计之对象克隆clone和魔术方法__clone用法分析)
- html5基础知识入门(萌新HTML5 入门指南二)