css实现圆柱的形状

效果如图

主要通过上下两个椭圆定位，中间一个矩形实现，椭圆通过圆角border-radius: 50% / 50%; 实现

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>yuanzhu</title><style>.container{width: 140px;margin: 100px auto;position: relative;}.square{width: 140px;height: 150px;background: linear-gradient(to right, #aaa,#fff,#aaa)}div[class^='circle']{position: absolute;left: 0;width: 140px;height: 30px;/* 椭圆 */border-radius: 50% / 50%;background: linear-gradient(to right, #aaa,#fff,#aaa)}.circle1{top: -15px;}.circle2{bottom: -15px;}.center{position: absolute;width: 30px;height: 120px;background: linear-gradient(to right, rgb(69, 221, 115),rgb(203, 243, 194),rgb(69, 221, 115));top: 50%;left: 50%;transform: translate(-50%,-50%);border: 3px solid #fff;}</style>
</head>
<body><div class="container"><div class="square"></div><div class="circle1"></div><div class="circle2"></div><div class="center"></div></div></body>
</html>

css实现圆柱的形状相关推荐

css揭秘实战技巧 - 形状 [二]
全目录本系列文章,主要是围绕css3属性,实现我们常见的各种效果,这些效果都是我们实战开发中经常可以用到的效果: css揭秘实战技巧- 背景与边框 [一] css揭秘实战技巧- 形状 [二] css ...
html 怎么设置鼠标效果,css怎么设置鼠标形状
相对于传统HTML的表现而言,CSS能够对网页中的对象的位置排版进行像素级的精确控制,支持几乎所有的字体字号样式,下面是学习啦小编带来的关于css怎么设置鼠标形状的内容,欢迎阅读! css怎么设置鼠标 ...
css中设置鼠标形状的函数,css怎样设置鼠标的形状
css怎样设置鼠标的形状发布时间:2020-11-13 10:10:40 来源:亿速云阅读:91 作者:小新小编给大家分享一下css怎样设置鼠标的形状,相信大部分人都还不怎么了解,因此分享这篇文 ...
用CSS画一些多边形状
文章出自个人博客https://knightyun.github.io/2019/01/27/css-draw-polygon,转载请申明 CSS是个很强大的网页开发工具,使生硬的网页变得丰富绚丽,c ...
通过css设置鼠标的形状
为了提高用户与页面的交互体验,通常在鼠标移到有监听事件的按钮或者a标签时改变鼠标的形状,让用户明白这是个可点击的按钮或是个有事件的按钮. 具体通过CSS cursor 属性设置例如: <inp ...
教你用CSS玩转各种形状？
很多小伙伴在做开发的时候,遇到一些要画很多形状的时候,就很纠结了,知道怎么用CSS去布局,就是不知道怎么画图案. 其实使用CSS可以绘制出很多形状,比如三角形,梯形,圆形,椭圆形等等,并不是只能画矩形 ...
CSS绘制各种各样的形状图形
目录实心圆圆环(空心圆) 半圆四分之一圆(扇形) 鸡蛋椭圆胶囊三角形月亮编辑做折纸效果目录实心圆圆环(空心圆) 半圆四分之一圆(扇形) 鸡蛋椭圆胶囊三角形把不需要的 ...
网页指针css代码,css常用鼠标指针形状代码
rabbitMQ第三篇:采用不同的交换机规则在上一篇我们都是采用发送信息到队列然后队列把信息在发送到消费者,其实实际情况并非如此,rabbitMQ其实真正的思想是生产者不发送任何信息到队列,甚至不知 ...
CSS cursor 属性-鼠标形状
cursor -- 定义鼠标样式取值: [ [<uri> ,]* [ auto | crosshair | default | pointer | move | e-resize | ne ...

css实现圆柱的形状

css实现圆柱的形状相关推荐

最新文章

热门文章