CSS3 如何对图片加入一个外轮廓呢?


摘要:
下文讲述css3中对图片加入外边框及添加相应的文字说明,如下所示:


实现思路:
1.借助hover伪类,当鼠标指向div时,使其边框变亮
2.设置文字说明,使用padding 使其与其它项目隔离

例:
设置图片外边框

<html>
<head>
<meta charset="utf-8"> 
<title>猫猫教程(www.maomao365.com)</title>  
<style>
div.img {
    margin: 5px;
    border: 1px solid #ccc;
    float: left;
    width: 180px;
}

div.img:hover {
    border: 1px solid #777;
}

div.img img {
    width: 100%;
    height: auto;
}

div.desc {
    padding: 15px;
    text-align: center;
}
</style>
</head>
<body>

<div class="responsive">
  <div class="img">
    <a target="_blank" href="#">
      <img src="http://www.maomao365.com/wp-content/uploads/2020/01/css_%E6%B7%A1%E5%85%A5%E6%B7%A1%E5%87%BA%E6%8F%90%E7%A4%BA%E6%A1%86_11875.gif" 
        alt="测试图片外部轮廓用法" width="300" height="200">
    </a>
    <div class="desc">可以将图片说明信息放入此处</div>
  </div>
</div>
  

</body>
</html>
  
css 图片外轮廓举例说明

css 图片外轮廓举例说明

css 如何设置淡入淡出的“箭头信息提示框”呢?


摘要:
下文将讲述css代码实现一个淡入淡出的“箭头信息提示框”的方法,如下所示:


实现原理:
1.使用after伪类对信息框添加一个箭头
2.箭头是由边框组成,
3.使用transition 属性设置(透明度效果)达到淡入淡出效果

css 为信息框添加箭头,并实现淡入淡出效果

  <html>
<head>
<meta charset="utf-8">
<title>猫猫教程(www.maomao365.com)</title>
</head>
<style>
.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    bottom: 150%;
    left: 50%;
    margin-left: -60px;
    opacity: 0;
    transition: opacity 1s;
}

.tooltip .tooltiptext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: black transparent transparent transparent;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}
</style>
<body style="text-align:center;">

<h2>提示框中加入箭头</h2>

<div class="tooltip">鼠标放入上面时,将出现带箭头的提示文本
  <span class="tooltiptext">提示信息</span>
</div>

</body>
</html>
css  淡入淡出提示框

css 淡入淡出提示框

CSS3 transition 属性功能简介说明


摘要:
下文讲述css3中transition属性的简介说明,如下所示:


transition 属性功能:

设置指定属性在指定的时间内达到其效果,
此属性常用于一些属性淡入淡出的操作

transition语法:
transition: property duration timing-function delay;

—-参数值功能说明

备注说明
transition-property

规定设置过渡效果的 CSS 属性的名称
transition-duration

规定完成过渡效果需要多少秒或毫秒
transition-timing-function

规定速度效果的速度曲线
transition-delay

定义过渡效果何时开始


transition 属性举例应用

<html>
<head>
<meta charset="utf-8">
<title>猫猫教程(www.maomao365.com)</title>
</head>
<style>

div
{
width:100px;
height:100px;
background:red;
transition:width 2s;
-moz-transition:width 2s; /* Firefox 4 */
-webkit-transition:width 2s; /* Safari and Chrome */
-o-transition:width 2s; /* Opera */
}

div:hover
{
width:180px;
}

</style>
<body >

 <div></div>

<p>当鼠标放入在div上时,可触发hover伪类,
         并且使其宽度变为180px
	 由于原div种设置transition 属性,所以此width属性,则会在2秒中执行完毕!
</p>
 
</body>
</html>
css transition属性渐变

css transition属性渐变