CSS缎带效果

1. [代码]ribbon.html     
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
.ribbon-content {
    border: 1px solid #DDD;
    font-weight: bold;
    margin: 0 -10px;
    min-height: 30px;
    padding: 7px 31px;
    text-align: center;
    line-height: 30px;
}
 
.ribbon-left {
    display: block;
    border-left: 10px solid white;
    border-top: 8px solid #EEE;
    float: left;
    height: 0;
    margin-left: -10px;
    width: 0;
}
 
.ribbon-right {
    display: block;
    border-right: 10px solid white;
    border-top: 8px solid #EEE;
    float: right;
    height: 0;
    margin-right: -10px;
    width: 0;
}
</style>
</head>
<body>
<div style="margin: 0 auto; width: 200px;">
    <div class="ribbon" style="background: whiteSmoke;">
        <div class="ribbon-content" style="background: whiteSmoke;">标题</div>
        <div class="ribbon-left"></div>
        <div class="ribbon-right"></div>
    </div>动漫flash：http://www.huiyi8.com/donghua/?
    <div style="background: whiteSmoke;">内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</div>
</div>
</body>
</html>

时间： 2024-11-09 02:40:05

CSS缎带效果的相关文章

纯CSS3实现彩色缎带效果

<!DOCTYPE HTML> <html> <head> <title>纯CSS3缎带效果</title> <style type="text/css"> .ribbon-content{border: 1px solid #DDD;font-weight: bold;margin: 0 -10px;min-height: 30px;padding: 7px 31px;text-align: center;lin

.Net中使用response.write(&#39;js代码&#39;)后css失去效果，解决办法。

net中使用response.write输出js会将js放在源代码的最前面,这样就可能出现破坏网页css的效果,让css失去效果 .net中使用Page.ClientScript.RegisterStartupScript(this.GetType(), "", " <script lanuage=javascript>if(confirm('确定要交卷吗?')==false){history.back()}; </script>"); 可以

CSS遮罩效果和毛玻璃效果

前面的话 本文将详细介绍CSS遮罩效果和毛玻璃效果 遮罩效果 普通遮罩 一般地,处理全屏遮罩的方法是使用额外标签 <style>.overlay{ position:fixed; top: 0;right: 0;left: 0;bottom: 0; background:rgba(0,0,0,0.8); } .lightbox{ position:absolute; top: 0;right: 0;left: 0;bottom: 0; margin:auto; z-index:1; width

CSS圆角效果 -webkit-border-radius(CSS3中border-radius隐藏的威力)

CSS圆角效果 -webkit-border-radius(CSS3中border-radius隐藏的威力) 来源:互联网 作者:佚名 时间:03-28 14:17:14 [大 中 小] border-radius:用这个属性能实现圆角边框的效果.现在只有Mozilla/Firefox 和 Safari 3支持该属性. -webkit-border-radius:苹果:谷歌,等一些浏览器认,因为他们都用的是webkit内核: -moz-border-radius:moz这个属性 主要是专门支持M

css闪动效果 ----样式发生快速的变化

<!DOCTYPE > <html> <head> <title>JS+CSS做文字闪烁</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <style> .wa{ font-size:13px; color: #0000FF; } .wa2{ font-size:13px; col

CSS盒子效果

CSS盒子效果: <!DOCTYPE html> <html> <head> <!--声明当前页面的编码格式 UTF-8(国际编码)gbk(中文简体)--> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <!--声明当前页面的三要素--> <title>CSS盒子效果</title>

15个来自 CodePen 的酷炫 CSS 动画效果【下篇】

CodePen 是一个在线的前端代码编辑和展示网站,能够编写代码并即时预览效果.你在上面可以在线分享自己的 Web 作品,也可以欣赏到世界各地的优秀开发者在网页中实现的各种令人惊奇的效果. 今天这篇文章为大家挑选了15个超炫的 CSS 动画效果的例子,这些 Demo 可以说都是艺术品.(为保证最佳的效果,请在 Chrome.Firefox 和 Safari 等现代浏览器中浏览) 9. 3D Synth Pure CSS 3D Synthesizer (mousedown for rotation

CSS动画效果的回调

用纯JS实现动画效果代码量大,计算复杂.因此现在前端页面的动画效果一般都采用CSS来实现. CSS动画实现简单高效,但是在处理动画,控制动画过程上却缺少一些有效手段. 例如我们想在动画效果完成时调用回调函数来处理一些事务,会发现CSS并没有提供直接的方法来让我们使用. 一.css动画简介 css动画效果有两种,即过渡和动画. 1.过渡 当元素从一种样式转变为另一种样式,我们为这种转变添加动画效果,这种效果就称作过渡. CSS的过渡是通过 transtion 属性实现的. transtion属性必

加速HTML5应用的九大方法-------2. 使用 CSS 转换效果

加速HTML5应用的九大方法-------2. 使用 CSS 转换效果使用 CSS 转换效果来替换 JavaScript 的方法可以提升页面元素在两种状态进行转换的速度,通过使用 totheleft 和 totheright 你可以迅速移动一个框.例如:div.box {left:50px;//for webkit browsers-webkit-transition: all 0.3s ease-out;//for mozilla-moz-transition: all 0.3s ease-o