css矩形凹陷效果_CSS-画一个红苹果

最新推荐文章于 2024-07-22 18:36:52 发布

你的僚机二狗

最新推荐文章于 2024-07-22 18:36:52 发布

阅读量512

点赞数

文章标签： css矩形凹陷效果

本文链接：https://blog.csdn.net/weixin_34542865/article/details/112078647

版权

本文通过CSS一步步教你如何画出一个立体的红苹果，从轮廓到高光、阴影、条纹、斑点再到叶柄的细节，最终形成一个栩栩如生的视觉效果。

摘要由CSDN通过智能技术生成

最近每天都带一个苹果加餐，有次吃到一个十分漂亮的红苹果，突然觉得，可以试着画一个苹果看看。

之前确实无法想象，可以使用CSS能画出一个苹果。

先看效果：

你没有看错，这个不是真苹果。仅仅一百多行代码就可以实现的CSS的红苹果。我自己看到最终效果都惊呆了。

第一步画出苹果的轮廓：

.apple {  position: relative;  width: 300px;  height: 270px;  background-color: #bf2934;  border-radius: 160px 150px 145px 150px/160px 140px 210px 190px;}

第二步：将苹果变得更加立体

1)右上角使用亮色内阴影，画出高光效果

2)左下角使用两层暗色内阴影，画出背光的暗色效果

3)左上角增加一个亮色高光

4)整体增加径向渐变的背景，将重心高光，四周暗色

.apple {  position: relative;  width: 300px;  height: 270px;  background: radial-gradient(#0000, rgba(0, 0, 0, .1)),    radial-gradient(rgba(239, 156, 109, .2), #0000);  background-color: #bf2934;  border-radius: 160px 150px 145px 150px/160px 140px 210px 190px;  box-shadow: inset 30px -20px 30px 20px rgba(0, 0, 0, .15),    inset 10px -10px 15px 0 rgba(0, 0, 0, .15)