border-radius画企鹅

最新推荐文章于 2022-01-09 22:53:48 发布
最新推荐文章于 2022-01-09 22:53:48 发布
阅读量448 收藏
点赞数
分类专栏： CSS 文章标签： border-radius
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Vivian_shuang/article/details/51848200
版权

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Document</title>

<style>

.father{

position: fixed;

top: 50px;

left: 200px;

}

.head{

width: 400px;

height: 300px;

border: 1px solid black;

border-radius: 200px / 190px 190px 110px 110px;

background-color: black;

position: relative;

top: 0;

left: 200px;

z-index: 10;

}

.div1{

width: 100px;

height: 120px;

border-radius: 50px / 60px;

background-color: white;

position: absolute;

top:64px;

left:84px;

}

.div2{

width: 100px;

height: 120px;

border-radius: 50px / 60px;

background-color: white;

position: absolute;

top:64px;

right:84px;

}

.div11{

width: 50px;

height: 70px;

border-radius: 25px/ 35px;

background-color: black;

position: absolute;

top:26px;

left:31px;

}

.div111{

width: 20px;

height: 24px;

border-radius: 10px/12px;

background-color: white;

position: absolute;

top:17px;

left:23px;

background-image: -webkit-radial-gradient(white,#ccc);

}

.div112{

width: 6px;

height: 6px;

border-radius: 3px/3px;

background-color: white;

position: absolute;

top:40px;

left:17px;

}

.div21{

width: 50px;

height:70px;

border: 1px solid black;

border-radius: 25px/33px ;

background-color: black;

position: absolute;

top:26px;

right:31px;

}

.div22{

width: 30px;

height:50px;

border: 1px solid white;

border-radius: 15px/15px ;

background-color:white;

position: absolute;

top:39px;

right:41px;

}

.div23{

width: 55px;

height:30px;

border: 1px solid white;

border-radius: 25px/1px ;

background-color: white;

position: absolute;

top:66px;

right:28px;

}

.div3{

width: 280px;

height: 90px;

background-color: #FFC545;

border-radius: 140px/45px ;

position: absolute;

top: 190px;

left: 62px;

}

.div31{

width: 203px;

height: 42px;

background-color: black;

border-radius: 180px/50px;

position: absolute;

top: 51px;

left: 39px;

}

.div32{

width: 204px;

height: 80px;

background-color: #FFC545;

border-radius: 102px/40px ;

position: absolute;

top: 16px;

left: 37px;

}

.bo{

width: 450px;

height: 200px;

background-color: #FF1D1D;

border-radius: 225px/100px;

position: absolute;

top:145px;

left:185px;

z-index: 5;

}

.bo1{

width: 70px;

height: 74px;

background-color:#FF1D1D;

border-radius: 25px 30px 18px 30px;

position: absolute;

top: 305px;

left: 262px;

z-index: 5;

}

.body1{

width: 470px;

height: 470px;

background-color: black;

border-radius: 235px/235px;

position: absolute;

top: 150px;

left: 172px;

z-index: 3;

}

.body2{

width: 370px;

height: 400px;

background-color: white;

border-radius: 185px/200px;

position: absolute;

top: 206px;

left: 224px;

z-index: 3;

}

.hand1{

width: 50px;

height: 250px;

background-color: black;

position: absolute;

top: 278px;

left: 151px;

border-radius:50px 0px 40px 10px/150px 0px 70px 10px; 

}

.hand2{

width: 50px;

height: 250px;

background-color: black;

position: absolute;

top: 278px;

left: 617px;

border-radius:0px 50px 10px 40px/0px 150px 10px 70px ; 

}

.foot1{

width: 210px;

height: 100px;

background-color: #FFC742;

border: 2px solid #863512;

border-radius: 105px/50px;

position: absolute;

top: 547px;

left: 203px;

z-index: 1;

}

.foot2{

width: 210px;

height: 100px;

background-color: #FFC742;

border: 2px solid #863512;

border-radius: 105px/50px;

position: absolute;

top: 547px;

left: 409px;

z-index: 1;

}

</style>

</head>

<body>

<div class="father">

<div class="head">

<div class="div1">

<div class="div11">

<div class="div111"></div>

<div class="div112"></div>

</div>

</div>

<div class="div2">

<div class="div21"></div>

<div class="div22"></div>

<div class="div23"></div>

</div>

<div class="div3">

<div class="div31"></div>

<div class="div32"></div>

</div>

</div>

<div class="wei">

<div class="bo"></div>

<div class="bo1"></div>

</div>

<div class="body">

<div class="body1"></div>

<div class="body2"></div>

</div>

<div class="hand">

<div class="hand1"></div>

<div class="hand2"></div>

</div>

<div class="feet">

<div class="foot1"></div>

<div class="foot2"></div>

</div>

</div>

</body>

</html>

Vivian_shuang
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS3中border-radius属性设定圆角的使用技巧
01-21
border-radius CSS3中的代表——第一个在社区中得到广泛使用新属性。这意味着，除去Internet Explorer 8及更低版本，所有的浏览器可以显示圆角。为了使样式能正确应用，需要为Webkit和Mozilla内核添加前缀。 CSS ...
canvas 实现会动眼睛的企鹅
yingzizizizizizzz的专栏
12-26 744
参考代码：http://www.108js.com/article/article7/70037.html?id=193 整理了下代码，多加了点注释。。。 其中用到了  三次贝塞尔曲线  （暂时不太理解，等理解了再专门来解释） 代码： 眼睛会动的企鹅 body{ background:#000;} #drawing{ background:#817936;}
用canvas画一个卡通人物!!
laihaodong的博客
05-29 8707
html:&lt;canvas id="canvas" width="650" height="671"&gt;&lt;/canvas&gt;css:canvas {  border: 2px solid #08A573;  background-size: 100% 250%;  background-position: center bottom;}js:var canvas = docume...
使用html和css绘制企鹅图像
qq_38963393的博客
05-19 444
效果图： <style> .penguin { /* Only change code below this line */ --penguin-skin: gray; --penguin-belly: white; --penguin-beak: orange; /* Only change code above this line */ position: relative; margin: auto; display
用html画一个企鹅图案的代码,HTML5 Canvas来绘制图形
weixin_29863809的博客
06-18 515
1、HTML5元素用于图形的绘制，通过脚本(通常是javascript)来完成。2、标签只是图形容器，必须使用脚本来绘制图形。3、可以通过多种方法通过Canvas绘制路径、盒、圆、字符以及添加图像。二、Canvas绘制图形1、绘制矩形2、绘制圆形3、moveTo和lineTo4、使用bezierCurveTo绘制贝塞尔曲线5、绘制线性渐变6、绘制径向渐变7、绘制变形图形8、绘制图形合成gloabl...
6张思维导图搞定html、css(画QQ企鹅)
Extraor
05-23 3205
html、css
CSS3新属性 border-radius版企鹅
最文艺的程序媛
07-11 300
Document body{ margin-top: 100px; margin-left: 500px; } .head{ width: 300px; height: 240px; border: 1px solid black; background-color: #000; position: relative; border-radius: 150px 150px
css3，qq企鹅动画
qq_51131331的博客
01-09 624
1、效果图： 2、设计思想： （1）整个QQ企鹅有头部、左眼、右眼、嘴部、围巾、肚子、左手、右手、左脚、右脚十个部分。 （2） 头部部分里面包含了左右眼和嘴部； ：左右眼里面有三层元素：眼睛的底色部分、眼睛的黑色瞳孔、以及眼白。 ：嘴部部分里面包含有嘴唇。 ...
CSS3的Border-radius轻松制作圆角
01-19
前面系统总结了CSS3中Gradient和RGBA的用法，今天我们在一起来看看CSS3中制作圆角的属性border-radius的具体用法。在CSS2中，大家都碰到过圆角的制作。当时，对于圆角的制作，我们都需要使用多张圆角图片做为背景，...
css3 border-radius属性详解
12-09
有什么用？... border-radius: 50%; } 上述50%就是说设置各边圆角都为50%。 那么如何画个半圆？ 如下，把宽度设置为高度的两倍。 #demo2 { width:100px; height:50px; background:green; bo
CSS圆角效果 -webkit-border-radius(CSS3中border-radius隐藏的威力)
09-25
border-radius：用这个属性能实现圆角边框的效果。现在只有Mozilla/Firefox 和 Safari 3支持该属性。
浅析border-radius如何兼容IE
09-28
border-radius如何兼容IE呢？下面小编就为大家介绍一下border-radius兼容IE的方法。一起跟随小编过来看看吧，祝大家游戏愉快哦
盒子嵌套
Vivian_shuang的博客
07-06 3052
DOCTYPE html> html lang="en"> head> meta charset="UTF-8"> title>Documenttitle> style> #box1{ width: 50px; height:50px; background:#7FFF59; display: inline-block; border:5px solid #FFFD
映纷视觉小例子
Vivian_shuang的博客
07-06 2538
DOCTYPE html> html lang="en"> head> meta charset="UTF-8"> meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> link rel="stylesheet"
冰艺小例子3
Vivian_shuang的博客
07-07 941
DOCTYPE html> html> head> meta charset="UTF-8"> meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> title>title> link rel="stylesheet"
弹性布局小例子
Vivian_shuang的博客
07-06 751
DOCTYPE html> html> head> meta charset="UTF-8"> title>title> style> *{ margin: 0; padding: 0; } html,body,.wrap{ height: 100%; } .wrap{ width: 100%; height: 100%; display:-webki
如家小例子
Vivian_shuang的博客
07-07 725
DOCTYPE html> html lang="en"> head> meta charset="UTF-8"> meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> title>Documenttitle> lin
100度小例子
Vivian_shuang的博客
07-07 693
DOCTYPE html> html lang="en"> head> meta charset="UTF-8"> title>精灵图title> link rel="stylesheet" href="css/reset.css"> style> .father{ width: 980px; margin: 0 auto; } p{ padding:0;
border-radius: 50%;border-top-left-radius: 50%;border-top-right-radius: 50%;border-bottom-right-radius: 50%;border-bottom-left-radius:
最新发布
07-22
border-radius属性用于设置元素的圆角，而border-top-left-radius、border-top-right-radius、border-bottom-right-radius和border-bottom-left-radius属性用于分别设置元素的四个角的圆角半径。 当设置border-radius为50%时，元素的四个角将会呈现出一个完整的圆形。而通过使用border-top-left-radius、border-top-right-radius、border-bottom-right-radius和border-bottom-left-radius属性，可以分别设置元素的四个角的圆角半径为50%，使得元素的四个角都呈现出一个完整的圆形。 综上所述，使用下面的代码可以将一个元素的四个角都设置为一个完整的圆形： ```css border-radius: 50%; border-top-left-radius: 50%; border-top-right-radius: 50%; border-bottom-right-radius: 50%; border-bottom-left-radius: 50%; ``` 这样设置后，元素的边角将变得非常圆润。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值