Web网页设计之css_6. 用 css 设置图像效果

 

今天来说一下用 css 这是图像效果

一、图像大小、边框

图片的大小，我们可以直接使用 img 的属性 width、height进行设置

边框我们需要使用 css 样式，我们使用 border 进行设置

可以看到啊，我们这个图片有了一个 1px 宽度的红色实线的边框，solid就是实线，当然还有虚线

二、图文混排

这个图文混排是一个重点，我们平时布局就是需要使用到这个东西

先来看一下没有进行排版的样子

可以看到啊，图片自己占了一行，右面是空的，然后文字在下面

我们设置图片，让图片向左或者向右进行浮动，我们看一下

可以看到啊，我们这个文字是不是过去了，然后我们可以再让这个字距离图片一些举例，我们再来加一些样式

是不是距离文字一定的距离了

三、圆角图片

这个是 css3 的一个新的东西，可以让图片的边框进行变形，这个是使用的 border-radius

可以看到，这个图片的四个角都有了弧度了

四、响应式图片

我们以后的网站需要这种响应式图片，不然固定了图片的大小，对于手机和电脑屏幕上显示就不一样了。响应式图片会自动适配各种尺寸的屏幕。

我们来看一下

然后我们使用手机模式再看一下

可以看到，也是OK的，我们以后就使用这个方式去进行图片的响应式显示

 

这篇博客就到这里，大家好好练习一下，有不会的可以加我QQ：2100363119，当然，图片的样式不止这么一些，其他的可以看https://www.runoob.com/css3/css3-images.html 菜鸟教程

最近我的官网已经开放，大家可以关注一下：https://www.lemon1234.com