JavaWeb学习之路(50)–CSS应用实例之图片

简介: 本文目录1. 前言2. 普通图片3. 圆角图片4. 缩略图效果5.小结

1. 前言

上一篇我们详细讲解了如何利用CSS,来制作一个好看的按钮。


本篇我们来研究下如何用CSS美化图片。


2. 普通图片

普通情况下,我们给图片设置个宽度和高度即可。


普通图片:<br>

   <img src="1.jpg" class="img"><br>


对应CSS:


  .img {

           width: 400px;

           height: 300px;

       }


此时效果如下,比较生硬,难言美观:



3. 圆角图片

我们可以通过为图片添加圆角,让图片变得不那么生硬,虽然是一个小的改变,但是效果不错:


 圆角图片:<br>

   <img src="1.jpg" class="img img-round"><br>


对应CSS:


  .img-round {

           border-radius: 16px;

       }


效果如下:



4. 缩略图效果

还可以借助边框、内边距,实现一种好看且常用的缩略图效果,如下:


 缩略图:<br>

   <img src="1.jpg" class="img img-thumbnail"><br>


对应CSS:


      .img-thumbnail {

          border: 1px solid grey;

          border-radius: 16px;

          padding: 4px;

      }


此时效果如下,很明显缩略图的方式,看起来还是比较大气的。



5.小结

本节简单的讲解了如何使用CSS美化图片效果,虽然简单,但比较实用。


相关文章
|
3月前
|
前端开发 JavaScript UED
CSS滚动效果和视差滚动的原理、应用及其对用户体验的影响。从平滑滚动到元素跟随,再到滚动触发动画
本文探讨了CSS滚动效果和视差滚动的原理、应用及其对用户体验的影响。从平滑滚动到元素跟随,再到滚动触发动画,这些效果增强了页面的吸引力和互动性。视差滚动通过不同层次元素的差异化移动,增加了页面的深度感和沉浸感。文章还讨论了实现方法、性能优化及案例分析,旨在为设计师和开发者提供实用指导。
91 7
|
3月前
|
前端开发 UED 开发者
CSS Sprites和图标字体在网页图标加载优化中的应用。CSS Sprites通过合并多图标减少HTTP请求,提升加载速度
本文探讨了CSS Sprites和图标字体在网页图标加载优化中的应用。CSS Sprites通过合并多图标减少HTTP请求,提升加载速度;图标字体则以字体形式呈现图标,便于调整样式。文章分析了两者的优缺点及应用场景,并提供了应用技巧和注意事项,旨在帮助开发者提升页面性能,改善用户体验。
48 5
|
3月前
|
编解码 前端开发 UED
探讨了CSS媒体查询在移动端开发中的应用,介绍了媒体查询的基本概念、常见条件及其在响应式布局、导航菜单、图片优化和字体调整等方面的具体应用
本文深入探讨了CSS媒体查询在移动端开发中的应用,介绍了媒体查询的基本概念、常见条件及其在响应式布局、导航菜单、图片优化和字体调整等方面的具体应用。通过实际案例分析和注意事项的讨论,旨在帮助开发者更好地理解和运用媒体查询,提升移动端用户体验。
77 4
|
3月前
|
前端开发 JavaScript UED
深入理解与应用 CSS 伪类选择器
【10月更文挑战第23天】通过以上对 CSS 伪类选择器的深入探讨,我们可以更好地理解和应用它们,为网页设计和开发带来更丰富、更灵活的样式效果。同时,要注意在实际应用中根据具体情况合理选择和使用伪类选择器,以达到最佳的设计效果和用户体验。
81 2
|
4月前
|
前端开发 开发者 UED
CSS技术的演变与应用
【10月更文挑战第11天】CSS技术的演变与应用
|
5月前
|
XML JavaScript 前端开发
JavaWeb基础4——HTML,JavaScript&CSS
HTML,JavaScript&CSS、元素、标签、css 选择器、属性、JavaScript基础语法、JavaScript对象、BOM浏览器对象模型、DOM文档对象模型、事件监听、正则对象RegExp/ES6
|
5月前
|
前端开发
|
5月前
|
Web App开发 移动开发 自然语言处理
|
Web App开发 前端开发
CSS入门级学习
css入门学习1:认识CSS  1.1:css简介,css全称是层叠样式表,Cascading style sheets   1.2:css的作用,主要是用于定义html内容在浏览器内的显示样式,如文字大小,颜色,字体加粗等     使用css样式的一个好处是通过定义某个样式,可以让不同的网页位置的字体有着统一的字体,字号或者颜色等   1.
1305 0
|
Web App开发 前端开发
CSS入门学习
    一,What?        CSS的全称是CascadingStyle Sheet,汉语意思是“级联样式表”,通常又称为“风格样式表(StyleSheet)”,它是用来进行网页风格设计的。
923 0

热门文章

最新文章