专业网站设计联系,做网站用的软件是什么了,国外 网站 欣赏,做网站背景图片浪漫爱情目录
背景属性设置
圆角矩形 背景属性设置
背景颜色,在style中 background-color:颜色#xff1b; 背景图片 background-image:url(……) 背景图片的平铺方式 background-repeat: 平铺方式 repeat 平铺#xff08;默认#xff09;no-repeat 不平铺repeat-x 水平平铺repea…目录
背景属性设置
圆角矩形 背景属性设置
背景颜色,在style中 background-color:颜色 背景图片 background-image:url(……) 背景图片的平铺方式 background-repeat: 平铺方式 repeat 平铺默认no-repeat 不平铺repeat-x 水平平铺repeat-y 垂直平铺 背景图片的位置 background-position:200px 200px; //x轴 y轴 //也可以用以下方式 1.方位名词topleftrightbotton 2.精确单位坐标或者百分比左上角为原点 3.混合单位同时包含方位名词和精确单位 背景尺寸 background-size: length | percentage | cover | contain; cover背景图片会完全覆盖背景区域可能会造成图片未完全显示contain背景图片会有留白 圆角矩形 border: 2px green solid; /*加边框*/ border-radius: 20px; /*设置圆角弧度*/ border-radius通常也用来画圆
当border-radius 的值为高度或者宽度的一般即可画出圆的效果如下示例 !DOCTYPE html html langen head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 titleDocument/title style div{ width: 200px; height: 200px; border: 2px green solid; /*加边框*/ border-radius: 100px; /*也可换成 border-radius: 50%*/ } /style /head body div /div /html 当然我们也可以对一个矩形的四个角进行单独设置 //左上角 border-top-left-radius: 20px; //右上角 border-top-right-radius: 40px; //左下角 border-bottom-left-radius: 20px; //右下角 border-bottom-right-radius: 20px; 上述代码也可以简写为 border-radius: 20px 40px 20px 20px; /*按 左上角-右上角-右下角-左下角 的顺序
