css画1个棒棒糖的案例编码

日期:2020-10-15 类型:科技新闻 

关键词:在线网页制作,建网页,个人简介网页制作,简单网页,建立网页

情况:每日发展1点点,多累积1点点.就会愈来愈棒

编码:

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF⑻">
<title>棒棒糖</title>
    <h3>用css画1个棒棒糖</h3>

    <p>规定:</p>
    <p>1:棒棒糖正中间文本为水平垂直居中</p>
    <p>2:不可少于3层色调</p>
<style>
 .round{
    width: 100px;
    height: 100px;
    background-color: #e5e7e9;
    position: relative;
    text-align: center;
    margin: 100px;
    font: italic bold 17px/100px arial,sans-serif;
    box-shadow: 
        0 0 0 10px #4286b4,
        0 0 0 20px #fc052e,
        0 0 0 30px #FBDD00,
        0 0 0 40px #00BDFB;
    border-radius: 200px;
    color: #ffffff;
 }
 .bangbang{
    width: 20px;
    height: 150px;
    margin: ⑻0px 0px 0px 142px;
    background-color: #00BDFB;
    border-radius: 10px;
 }
</style>
</head>
<body>
    <div class="round">
    hello world!
    </div>
    <div class="bangbang"></div>
</body>
</html>

实际效果图:

 

今日累积到的专业知识:

1:有关font的缩写

font-style:italic;
font-variant:small-caps;
font-weight:bold;
font-size:12px;
line-height:1.5em;
font-family:arial,verdana;

能够写成:

font: italic bold 17px/100px arial,sans-serif;

17px意味着:font-size
100px意味着:line-height

应用简写必须留意的地区:

1:font-size和line-height只能根据斜杠/构成1个值,不可以分开写。

2:次序不可以更改.这类简写方式仅有在另外特定font-size和font-family特性时才起功效。并且,假如你沒有设置font-weight, font-style, 和 font-varient ,她们会应用缺省值

2:有关垂直居中

用了最简易的文本高宽比与div高宽比同样,在设定text-align:center.假如不设定font就设定line-height:100px;也是能够做到文本垂直居中的实际效果

3:有关边框

我用的是box-shadow特性,这个特性能够设定好几个值.较为合适我如今的情景.假如是值必须双层,或1层,能够立即设定boder或两个div嵌套循环或outline特性.

总结

以上所述是网编给大伙儿详细介绍的css画1个棒棒糖的案例编码,期待对大伙儿有一定的协助,假如大伙儿有任何疑惑请给我留言,网编会立即回应大伙儿的。在此也十分谢谢大伙儿对脚本制作之家网站的适用!
假如你感觉本文对你有协助,欢迎转载,烦请注明出处,感谢!