28.轮廓阴影和圆角

轮廓
html:
（1）写css链接时，文件夹最好用../ 而不是用./

css:
（1）outline类似于设置边框，但区别是，不会影响盒子周围的元素，不像块元素
写法和border类似

代码：

.box1 {
    width: 100px;
    height: 100px;
    outline: 10px solid rebeccapurple;
    background-color: royalblue;
    /* box-shadow: 0px 0px 50px rgba(74, 74, 126, 0.78); */
}

阴影
css:
（1）box-shadow，设置盒子模型的阴影，设置值： xpx xpx xpx rgba(x,x,x,x); 前两个是设置离边框水平和垂直方向的偏移距离，第三个值是设置阴影的宽度，第四值是设置颜色和透明度

代码：

.box1 {
    width: 100px;
    height: 100px;
    /* outline: 10px solid rebeccapurple; */
    background-color: royalblue;

    box-shadow: 0px 0px 50px rgba(74, 74, 126, 0.78);
}

圆角：
css:
（1）border-top-left-radius: 30px 10px;
/两个px值，第一个为水平，第二个为竖直。以该值为半径画椭圆，即得到该图/
如果只设置一个px值，则是以该值为半径画圆，即可得到该图
也可以只是用border-radius: xpx; /进行统一设置 /

.box1 {
    width: 100px;
    height: 100px;
    /* outline: 10px solid rebeccapurple; */
    background-color: royalblue;

    /* box-shadow: 0px 0px 50px rgba(74, 74, 126, 0.78); */
    border-top-left-radius: 30px 10px;
    border-bottom-left-radius: 30px;
}