CSS图像样式

图像大小

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;
相关推荐
猿究院_xyz23 分钟前
微信小程序与echarts联动安卓真机测试出现黑色阴影
前端·javascript·微信小程序·小程序·echarts
IT_陈寒34 分钟前
Redis性能翻倍的5个冷门技巧,90%开发者都不知道的深度优化方案
前端·人工智能·后端
清水迎朝阳36 分钟前
监听 edge大声朗读 样式变化
前端·edge
油丶酸萝卜别吃1 小时前
修改chrome配置,关闭跨域校验
前端·chrome
m0_740043731 小时前
3、Vuex-Axios-Element UI
前端·javascript·vue.js
风止何安啊1 小时前
一场组件的进化脱口秀——React从 “类” 到 “hooks” 的 “改头换面”
前端·react.js·面试
JS_GGbond1 小时前
给数组装上超能力:JavaScript数组方法趣味指南
前端·javascript
前端无涯1 小时前
Tailwind CSS v4 开发 APP 内嵌 H5:安卓 WebView 样式丢失问题解决与降级实战
前端
小邋遢2.01 小时前
vscod 执行npm build报错:Error: Cannot find module ‘vite‘
前端·npm·node.js
是你的小橘呀1 小时前
新手入门 React 必备:电影榜单项目核心知识点全解析
前端·javascript