CSS图像样式 - 技术栈

CSS图像样式

覆东流2024-04-26 9:49

图像大小

CSS中width：调整图像宽度

height：调整图像高度

他们的属性值可以是固定的高度也可以是一个百分比值。当图像为百分比值的时候，浏览器会根据父元素的宽高来计算大小的。

css 复制代码

width:500px
height:30%

border-style用来定义边框样式，它包括实线边框和虚线边框。

实现框包括：soid实现框、double双线框、groove立体凹槽、ridge立体凸槽、inset立体凹边、outset立体凸边

虚线框包括：dotted点、dashed虚线。

其中最常用的就是虚线和实线

css 复制代码

border-style:soid;

border-color：定义边框颜色，颜色轻质可以是任何有效的颜色表示法

css 复制代码

border-color:#000;

border-width：用来定义个边宽度：顶部、右侧、底部、左侧

图像的边框包含顶部、右侧、底部、左侧这四个部分，边框的取值顺序也是这样的

css 复制代码

border-width:2px;

opacity：可以用来设计图像透明度，取值在0~1之间

0为完全透明，1为不透明

css 复制代码

border-width:0.5;  /*半透明*/

border-radius：用于设计圆角样式，可以用来定义圆角图像。他的取值是：

none:默认值，无圆角

length：可以百分数，或浮点数+单位组成的长度值，不可为负数。

css 复制代码

border-radius:50%   /*圆形图片*/

在中间加上top-right右上、top-left左上、bottom-right：右下、bottom-left左下

可以单独定义四个角的圆角

box-shadow：用来定义阴影效果，属性值有

none：默认无阴影

shadow：阴影类型+水平偏移+垂直偏移+阴影模糊度+阴影颜色

阴影类型有两种：默认外阴影，inset内阴影

水平偏移、垂直偏移阴、阴影模糊度是由浮点数+单位组成的长度值

阴影颜色：阴影的色彩

css 复制代码

box-shadow:inset -10px 0 3px red;