前端学习笔记42-轮廓阴影和圆角

前端学习笔记42-轮廓阴影和圆角

  • 轮廓
  • 阴影
  • 圆角

轮廓

看两份代码


<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>Documenttitle>
    <style>
        .box1{
      
            width: 100px;
            height: 100px;
            background-color: #bfa;
            border: 10px red solid;
        }
    style>
head>
<body>
    <div class="box1">div>
    <span>Hellospan>
body>
html>

前端学习笔记42-轮廓阴影和圆角_第1张图片


<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>Documenttitle>
    <style>
        .box1{
      
            width: 100px;
            height: 100px;
            background-color: #bfa;
            outline: 10px red solid;
        }
    style>
head>
<body>
    <div class="box1">div>
    <span>Hellospan>
body>
html>

前端学习笔记42-轮廓阴影和圆角_第2张图片
看到了吧,用outline并不会把span元素挤下去,即不会影响box1的可见框。
这个outline可以用在:hover,当鼠标移入时,添加轮廓。

阴影

设置元素阴影的是box-shadow,它不影响元素布局。
如果写下面代码,

    <style>
        .box1{
      
            width: 100px;
            height: 100px;
            background-color: #bfa;
            box-shadow: black;
        }
    style>

前端学习笔记42-轮廓阴影和圆角_第3张图片
并不能看到阴影,因为它在盒子的下方。
所以设置两个偏移量,看下面代码

box-shadow:10px 10px black;

前端学习笔记42-轮廓阴影和圆角_第4张图片
第一个是水平的, 第二个是垂直的。如果想往左或往上移动,可以设置负值。

可以用rgba设置颜色和透明度,这样更好看,但是边缘太清晰了,如果想有模糊效果,可以再添加一个模糊半径值在颜色前面,如下

    <style>
        .box1{
      
            width: 100px;
            height: 100px;
            background-color: #bfa;
            box-shadow:10px 10px 10px rgba(0,0,0,0.5);
        }
    style>

前端学习笔记42-轮廓阴影和圆角_第5张图片

圆角

如果我们想给盒子弄成圆角,要如何操作?
用border-radius。
如果想单独设置某个角,可以用如下四个。
border-top-left-radius
border-top-right-radius
border-bottom-left-radius
border-bottom-right-radius
如果写如下代码

    <style>
        .box1{
      
            width: 100px;
            height: 100px;
            background-color: #bfa;
            border-top-left-radius: 10px;
        }
    style>

前端学习笔记42-轮廓阴影和圆角_第6张图片
这里10px表示圆弧的半径为10px。
如果设置两个参数,则是一个椭圆弧。
还可以用百分比。
此外,直接用border-radius可以一次性设置四个,用法和之前的一样。这里如果想设置椭圆,则用/隔开。

你可能感兴趣的:(小白前端学习,html,css)