在浏览过众多网站之后,感觉网站的前端体验对用户来说很重要,一个感觉好看的网站就有一种想再次访问的欲望,个人感觉为图片或者卡片添加一个圆角特效逼格就会立马上升一个等级!

WordPress等网站前端美化之给图片添加圆角!-一艘大轮船

目前想到的给图片或者卡片添加圆角特效的有如下两种方法!

一、图片处理过程加添加圆角特效!

如果你经常使用PS处理图片,最后多加几部操作即可!这也是我经常采用的方法。因为懒得去改代码,并且最近考试也很多!

①所有图层复制一层,合并一个图层。

②选中整个图片,可以点击“顶部菜单的选择,然后点击全部”,还可以通过按住ctrl点击图层!

③点击顶部菜单的"选择>修改>平滑”,设置四角的半径,建议是5-10之间,具体可以多试几次,找一个自己看着舒服的值。

④ctrl+j,把选中的部分复制一个新图层,隐藏旧图层。

⑤点击顶部菜单的"文件>导出>储存为web所用格式”,如果是2015版本之前的直接点击文件就可以找到储存为web所用格式,图片格式选择png,如果你保存为jpg格式,四角就会被填充为白色,如果你的网站背景为白色,就不会被发现,如果你的网站背景为别的颜色尽量保存为png格式!

二、给图片和图片所在的div添加css样式!

这种方法一劳永逸,而且不仅适用于图片,还适用于卡片。也发现了好多博客网站都才用了这种方法,尤其是感觉知更鸟的主题卡片加上圆角之后看着舒服了很多!

①用浏览器打开网页,F12审查元素,找到想添加特效的图片或卡片所在的div和其css属性名称!

②在浏览器中添加代码,预览效果。

③在源代码中添加代码!

所有边框圆角10个像素:border-radius: 10px;

左上部边框圆角10个像素:border-top-left-radius: 10px;

右上部边框圆角10个像素:border-top-right-radius: 10px;

左下部边框圆角10个像素:border-bottom-left-radius: 10px;

右下部边框圆角10个像素:border-bottom-right-radius: 10px;