海口云建站模板,wordpress301不能用,威海网站建设whhl,深圳 网站设计师 招聘一#xff1a;设置盒子大小-box-sizing
默认情况下#xff1a;盒子可见宽的大小由内容区#xff0c;内边距#xff0c;边框共同决定
box-sizing 属性用来设置盒子尺寸的计算方式#xff0c; 也就是 width/height 指的是谁 可选值#xff1a; content-box 内容区 默认值…一设置盒子大小-box-sizing
默认情况下盒子可见宽的大小由内容区内边距边框共同决定
box-sizing 属性用来设置盒子尺寸的计算方式 也就是 width/height 指的是谁 可选值 content-box 内容区 默认值 border-box 宽度和高度用来设置整个盒子可见框的大小包括边框padding内容区
二设置盒子阴影- box-shadow 参数1参数2参数3参数4
设置元素的阴影效果不会影响到页面布局 第一个值水平偏移量 正-左 负-右 第二个值垂直偏移量 正-下 负-上 第三个值模糊半径 第四个值颜色
三设置盒子圆角-border-radius
border-radius 用来设置圆角 以XXpx为半径画圆 还可以单独设置一角的圆角 border-top-right-radius border-top-left-radius border-bottom-left-radius border-bottom-right-radius 设置圆形 border-radius: 50%;
!DOCTYPE html
html langenheadmeta charsetUTF-8 /meta http-equivX-UA-Compatible contentIEedge /meta nameviewport contentwidthdevice-width, initial-scale1.0 /titleDocument/titlestyle.box{width: 100px;height: 100px;background-color: red;border: 10px solid yellowgreen;box-sizing:border-box; }.box1 {width: 200px;height: 200px;background-color: #f60;box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.5);}.box2 {width: 200px;height: 200px;background-color: #bfa;/* border-radius: 10px 50px; *//* border-radius:50%; */border-top-right-radius:50px;}/style/headbody!-- 阴影例子 --div classbox1 box/div!-- 圆角例子 --div classbox2/div/body
/html
