通过拆分插件来学习做css立体图


1、css写好如下图

程序如下:

2、椭圆造型

#pbtn{ border-radius:200px /100px;}

3、底盘增加阴影效果

#pbtn { box-shadow:0px -15px 15px#88finset, 10px -15px 15px#44finset, -10px -15px 15px#fffinset, -0px 15px#88f, -35px 40px 5pxrgba(0,0,0,0.5);}

4、字体阴影效果

#btnlabel { text-shadow:3px -3px 1px#44f, -3px 3px 1px#fff;}

5、字体倾斜效果

#btnlabel { transform:scale(1,0.5);}

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 1、垂直对齐 如果你用CSS,则你会有困惑:我该怎么垂直对齐容器中的元素?现在,利用CSS3的Transform,...
    kiddings阅读 3,208评论 0 11
  • 1. tab列表折叠效果 html: 能源系统事业部 岗位名称: 工作地点 岗位名...
    lilyping阅读 1,909评论 0 1
  • 1、属性选择器:id选择器 # 通过id 来选择类名选择器 . 通过类名来选择属性选择器 ...
    Yuann阅读 1,663评论 0 7
  • 我们班下课的很准时,但隔壁班就没那么好运了。我偷偷的趴在他们班窗户那里看着,但是听不到里面说的什么。 宇看我这样直...
    爱梦的我阅读 177评论 0 0
  • 看到“早上起来要有所期待”这几个字,问自己,我期待的是什么? 每天早上挣扎着,在迷迷糊糊中醒来。像一个写好程序的高...
    海星_love阅读 179评论 2 1