html中给图片设置好看的样式

1.设置图片的box-shadow属性:

一般可以这样设置：

	box-shadow:rgba(0,0,0,0.2) 0 1px 5px 0px;

关于rgba中0.2的值说明一下：它是透明度，1为不透明，依次递减

2.设置图片的border-radius属性：

设置一个值就是左上，右上，右下，左下都为一样的大小

	border-radius: 5px;

设置三个值：左上5px，右上4px，右下3px，左下2px

	border-radius: 5px 4px 3px 2px

设置两个值：左上 右上 为5px ；右下，左下为2px

	border-radius:5px 2px;

3.如果你还想要鼠标悬浮时有效果加个hover事件，打上你想要的样式代码就行

下面展示使用这两个属性的 主体代码。
在body标签里面写如下代码

<div id="content">
        <img src="images/105111-1568602271007b.jpg" alt="">
    </div>

head标签里的代码样式代码

<style>
        #content
        {
            margin: 50px auto;
            width: 600px;
            height: 340px;
        }
        #centent img
        {
            width: 100%;
            height: 100%;
            box-shadow:   rgba(243, 20, 20, 0.2) 0 2px 5px 0px;
            border-radius: 5px;
        }
 </style>

没加上方两个属性前

加了属性后的效果图：
ps:可能有点不太明显，是属性值设置的不够大，当然懂了怎么使用这两个属性就行可以自己慢慢调