在工作中经常需要对图片进行缩放，但有些缩放会让图片变形，所以今天就给大家介绍CSS如何实现图片等比例缩放不变形，正在学习CSS的小伙伴赶紧过来看看吧！下面一段代码给大家介绍CSS实现图片等比例缩小不变形 ，具体代码如下所示：<img src="../images/bg1.jpg" alt="" />img {/*等宽缩小不变形*//*width: 100%;*//*二选一*//*等高缩小不变形*/height: 100%;} 补充：CSS控制图片大小不变形方法一、(不错，我正在用)img {max-width:...
本章给大家介绍用css实现横向滚动条的两种方式。有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。html代码：<div class="nav_wrap"><ul class="nav_mine"><li class="nav_item">全部</li><li class="nav_item">Adobe</li><li class="nav_item">微软</li><li class="nav_item">会计</li><li class="nav_item">绘画</li><li class="nav_item">Adobe</li><li class="nav_item">微软</li><li class="nav_item">会计</l...
本篇文章给大家带来的内容是关于如何使用CSS实现鼠标经过图片上图片缩放（缓慢变化，有过渡效果，缩放的过程是有动画过渡的）效果，主要用到CSS transform属性，css3 transition属性，以下实现效果和具体的实现方法，希望对你有所帮助。先来看下效果预览代码解读HTML部分的代码<div class="content"><ul><li><img class="amplify" src="img/1.jpg" title="放大"/></li><li><img class="narrow" src="img/1.jpg" title="缩小"/></li...
我们在进行网页前端开发的时候，为了使网站在视觉上显得更加美观，效果更加丰富，css的强大属性自然是功不可没。那么这里就要提到 一个我们在网页前端开发的时候常常使用的属性，css display属性。所有主流浏览器都支持 display 属性。其次，我们都知道display 属性规定元素应该生成的框的类型。而在css display属性中经常被用到，也是最常见的几种属性值：none、block、inline、inline-blockt。接下来我们就通过具体的代码实例来一...
当我们在进行网页前端开发的时候，一般获取文章标题，然后一行一行的显示。但是当标题过长的时候，就会造成换行显示。还有显示部分文本信息时，如果全部显示就过于繁琐，会带来不会的网页体验感。虽然我们可以使用overflow:hidden将超过宽度的字符隐藏掉。但是结尾看起来总会让人觉得有点僵硬。而且也不利于让用户知道后面还有没显示完的字符。最好的方法，就是将多余的字符用省略号来代替。本章我们就给大家详细介绍CSS如何使文本...
在我们学习前端开发的时候，有时总会把css中的伪类和伪元素混淆在一起。那么，在css中什么是伪类？什么又是伪元素？它们有什么区别，又是怎么使用的？本章我们就给大家好好聊聊css中的伪类和伪元素，介绍css中的伪类和伪元素的区别和基本用法。有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。一.伪类（用于向某些选择器添加特殊的效果）伪类存在的意义是为了通过选择器找到那些不存在与DOM树中的信息以及不能被常...
css怎么添加阴影效果？可以使用text-shadow属性与box-shadow属性来添加。下面本篇文章就来给大家介绍一下text-shadow属性与box-shadow属性是如何添加阴影效果的，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。推荐手册：CSS3最新版参考手册一：添加文字阴影效果（text-shadow属性）1. text-shadow是什么?text-shadow可以支持给文字加上阴影,这样我们在设计时可以利用css3属性增加文字的质感而不用使用任何图片....
本章我们给大家讲解一下什么是css选择器？css3中5种常见的基本选择器。有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。一：什么是css选择器？CSS是一种用于屏幕上渲染html，xml等一种语言，CSS主要是在相应的元素中应用样式，来渲染相对应用的元素，那么这样我们选择相应的元素就很重要了，如何选择对应的元素，此时就需要我们所说的选择器。在 CSS 中，选择器是一种模式，用于选择需要添加样式的元素。选择器主要...
本章给大家带来css如何设置边框样式？边框的不同样式介绍（代码实例）,有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。一：border边框线的基本样式边框样式属性指定要显示什么样的边界1.border-style 属性 none: 默认无边框dotted: 定义一个点线边框dashed: 定义一个虚线边框solid: 定义实线边框double: 定义两个边框。 两个边框的宽度和 border-width 的值相同groove: 定义3D沟槽边框。效果取决于边框的颜色值...
本章给大家介绍如何用css画正六边形？用css画正六边形的两种方法（代码实例）。有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。在之前要先了解一下正六边形内角和边的关系，正六边形的每个内角是60deg，如图（√3其实是根号3）：方法一：原理把正六边形分成三部分，左中右分别是：before部分，div部分，after部分，如图：before三角形部分是div的before伪元素，after三角形部分是div的after伪元素。<!DOCTYPE htm...
本章给大家介绍用css实现横向滚动条的两种方式。有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。html代码：<div class="nav_wrap"><ul class="nav_mine"><li class="nav_item">全部</li><li class="nav_item">Adobe</li><li class="nav_item">微软</li><li class="nav_item">会计</li><li class="nav_item">绘画</li><li class="nav_item">Adobe</li><li class="nav_item">微软</li><li class="nav_item">会计</l...
在前端网页开发的时候，往往会用到一些渐变色的效果，这样可以使得前端页面更加美观。那么这些渐变效果是如何用css代码实现出来的？本章就给大家带来css如何实现渐变效果？css背景色渐变与文字渐变效果的实现（代码实例），介绍css 渐变样式和如何实现css渐变。有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。一、css 背景色渐变 样式1. css 线性背景渐变样式语法：background-image: linear-gradient(<point> ||...
本章给大家介绍如何css实现二级菜单效果？水平、垂直菜单的实现（代码实例）。通过html+css代码制作两种不同的二级菜单效果，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。一、css实现水平的二级菜单样式css实现水平的二级菜单代码：<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>二级菜单--水平</title><style>*{margin: 0;padding: 0;}.demo{background: red;width: 100%;height: 35px;}nav{hei...
我们在平时的前端开发的时候，有时候是需要一些小图形来丰富一下页面效果，比如：下拉列表的倒三角图形。那么这样的一个三角形是如何制作出来的，本章给大家介绍如何利用css或html画出一个三角形？两种不同的制作三角形方法（代码实例）。让大家知道如何用纯css代码实现三角形的绘制，或者使用html5是如何画三角形的。有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。一、利用css的border属性，即可实现三角形的绘...
在CSS中，让元素隐藏（指屏幕范围内肉眼不可见）的方法很多，有的占据空间，有的不占据空间；有的可以响应点击，有的不能响应点击。那么这些css方式是怎样实现隐藏元素的，之间又有什么区别。本章给大家介绍css如何隐藏页面元素？css隐藏元素的四种实现方法以及之间的区别（代码实例）。有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。一、css隐藏元素的四种实现1. visibility: hidden，设置元素隐藏代码实例：<!...