1

我正在 wordpress 中创建自定义主题。我找到了一个代码，可以在侧边栏上的项目标题周围获得丝带效果。但是，色带并没有完全流过侧边栏的边缘，而是位于侧边栏的中间，当我将标题向右浮动时，部分色带会被隐藏。我一直在用谷歌浏览器“检查元素”方面来玩它，但似乎不能让它工作。我应该怎么办？网站链接：gamedaymeetup.com

    h1.widget-title {
    text-align: center;
    position: relative;
    color: #fff;    
    margin: 0 -30px 30px -30px;
    padding: 10px 0; 
    text-shadow: 0 1px rgba(0,0,0,.8);
    background: #5c5c5c;
    background-image: -moz-linear-gradient(rgba(255,255,255,.3), rgba(255,255,255,0));
    background-image: -webkit-linear-gradient(rgba(255,255,255,.3), rgba(255,255,255,0));
    background-image: -o-linear-gradient(rgba(255,255,255,.3), rgba(255,255,255,0));
    background-image: -ms-linear-gradient(rgba(255,255,255,.3), rgba(255,255,255,0));
    background-image:  linear-gradient(rgba(255,255,255,.3), rgba(255,255,255,0));
    -moz-box-shadow: 0 2px 0 rgba(0,0,0,.3);
    -webkit-box-shadow: 0 2px 0 rgba(0,0,0,.3);
    box-shadow: 0 2px 0 rgba(0,0,0,.3);

}

h1.widget-title:before, h1:after
{
    content: '';
    position: absolute;
    border-style: solid;
    border-color: transparent;
    bottom: -10px;
}



h1.widget-title:after
{
    border-width: 0 0 10px 10px;
    border-left-color: #222;
    right: 0;
}

这是侧边栏的样式

#sidebar {
text-align: left;
display: block;
padding: 9px;
float: right;
width: 246px;
height: 100%;
font-family: "Gotham SSm A", "Gotham SSm B", Arial, sans-serif;
font-size: 13px;
line-height: 16px;
letter-spacing: .2px;
background-color: #FFF;
background-position: bottom;
color: #000;
border-left-width: 1px;
border-left-style: inset;
border-left-color: #C3C3C3;

}

4

1 回答 1

0

我将从 CSS Tricks 中 Chris Coyier 的功能区 css 开始：http: //css-tricks.com/snippets/css/ribbon/

他根据我所看到的情况解决了大多数边缘情况。我在制作中使用它，并没有太大问题。

于 2013-04-30T20:33:46.380 回答