CSS打造的边框折角效果

<html>

<head>

<title>CSS打造的边框折角效果</title>

<!--

.curlycontainer{

border: 1px solid #b8b8b8;

margin-bottom: 1em;

width: 300px;

font-size:12px

}

.curlycontainer .innerdiv{

background: transparent url(brcorner.gif) bottom right no-repeat;

position: relative;

left: 2px;

top: 2px;

padding: 1px 4px 15px 5px;

}

-->

</style>

</head>

<body>

<div class="innerdiv">很漂亮的CSS边框折角效果，用到了一个右下角折角图片，就是用CSS去定义边框某个角的背景图片，给你的网页增添一

点个性功能，不错吧？其实你可以试下边框都使用折角，这样就对称了，更好看。。。。。。

</div>

<div><A href="http://www.999jiujiu.com/">http://www.999jiujiu.com/</A></div>

</body>

</html>

时间： 2024-11-01 20:47:12

CSS打造的边框折角效果的相关文章

边框折角效果

1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style> 7 .image-layer { 8 width: 384px; 9 height: 240px; 10 margin: 40px auto 0; 11 position: relativ

CSS3实战开发: 折角效果实战开发

<!DOCTYPE html> <html> <head> <meta charset="utf-9"> <meta name="keywords" content="css,css3,实战互联网,教程"> <meta name="description" content="css3实现折角效果,折角效果,css3实战尽在实战互联网" >

各位网友,大家好,我是陌上花会开,今天这篇文章,我将手把手教大家如何开发一套纯CSS的折角效果.一如往常,我不提供代码下载,但是我可以保证,只要将教程中的代码复制到本地,绝对百分百获得与我演示的效果一样,希望各位明白我的用意. 好了,直接开始今天的教程吧.首先,我先给大家演示一下今天实战案例的效果: 有人会说这是什么?这就是我们今天的实战开发,我将带领大家开发上图中的右上角折叠效果. 在我讲解完之前,有些人可能觉得很难,不可思议.我想跟你们说:真的so easy.下面就请跟着我的分解步骤一步步学

CSS3图片折角效果

本篇文章由:http://xinpure.com/css3-picture-angle-effect/ 图片折角效果主要是通过设置 border 属性实现的效果效果预览效果解析假设我们将一个元素的 width .height 都设置为0,然后再将 border 设置为 80px,上下和左右边框分别为两种不同的颜色即: width: 0; height: 0; border: 80px solid; border-color: #00a67c #333; 这时我们可以看到,四条边框像四个三

css3 折角效果

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>折角效果</title> <style type="text/css"> div { width: 300px; height: 200px; background: #333; position: relative; } div:before { content:

CSS 折角效果

1 <style type="text/css"> .div1 { width: 200px; height: 200px; background-color: #ff6a00; border-width: 6px; margin: 0 auto; } .div2 { position: relative; width: 0; height: 0; border: 20px solid black; border-color:transparent #ffd800 #ffd

CSS - 利用box-shodow实现缺角效果

起源 http://codepen.io/Zoxon/pen/waymQd?editors=110 理解box-shodow属性 http://www.w3school.com.cn/cssref/pr_box-shadow.asp http://www.cnblogs.com/lhb25/archive/2013/03/08/css3-box-shadow.html 代码 SCSS

div折角~~~

代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>折角效果</title> <style type="text/css"> div { width: 300px; height: 200px; background: #333; position: relative; } div:before { cont

[CSS揭秘]切角效果

将角切掉也是一种流行的设计风格传统解决方案可能是使用三角形或者其他形状的图片来盖住边角从而模拟切角效果有了CSS3,我们完全可以使用新技术来实现第一种方案: CSS渐变需求一: 一个矩形需要切掉一个45°角使用线性渐变来实现 background: #58a linear-gradient(-45deg, transparent 15px, #58a 0); 在渐变中,如果指定stop距离为0则表示与前一个stop的距离一样,所以从15px开始往后都是#58a 效果如下需求二: 一个