高职学院网站建设方案,什么网站好建设,带产品列表 wordpress,网站建设施工图片效果一、圆角效果 border-radius
实心上半圆#xff1a;
方法#xff1a;把高度(height)设为宽度#xff08;width#xff09;的一半#xff0c;并且只设置左上角和右上角的半径与元素的高度一致#xff08;大于也是可以的#xff09;。
div {height:50px;/*是width…效果一、圆角效果 border-radius
实心上半圆
方法把高度(height)设为宽度width的一半并且只设置左上角和右上角的半径与元素的高度一致大于也是可以的。
div {height:50px;/*是width的一半*/width:100px;background:#9da;border-radius:50px 50px 0 0;/*半径至少设置为height的值*/
}
实心圆 方法把宽度width与高度(height)值设置为一致也就是正方形并且四个圆角值都设置为它们值的一半。如下代码
div {height:100px;/*与width设置一致*/width:100px;background:#9da;border-radius:50px;/*四个圆角值都设置为宽度或高度值的一半*/
}
效果二、阴影 box-shadow
box-shadow是向盒子添加阴影可以添加一个或者多个具体的语法为
box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径][阴影扩展半径][阴影颜色][投影方式]
其中
X轴偏移量必需水平阴影的位置。允许负值
Y轴便宜量必需垂直阴影的位置。允许负值
阴影模糊半径可选模糊距离其值只能是为正值如果其值为0时表示阴影不具有模糊效果其值越大阴影的边缘就越模糊
阴影扩展半径可选阴影的尺寸其值可以是正负值如果值为正则整个阴影都延展扩大反之值为负值时则缩小
阴影颜色可选省略默认为黑色
投影方式可选省略为外阴影方式设置inset为内部阴影方式
效果三、边框图片border-image
根据border-image的语法如图 其中repeat就是一直重复然后超出部分剪裁掉而且是居中开始重复 round可以理解为圆满的铺满图片不会被裁剪为了实现圆满所以会压缩或拉伸 stretch就是拉伸有多长拉多长让图片拉伸成对应边框的长度
注意Chrome下中间部分也会被拉伸webkit浏览器对于round属性和repeat属性似乎没有区分显示效果是一样的。
