相关疑难解决方法(0)

角落边框效果

似乎无法找到任何有关如何使用CSS实现此效果的帮助.

这是一个CSS脑力激荡器给你.我想创建一个仅包含文本字段周围边角的边框,如下图所示:

我想创建2个矩形div,一个带蓝色边框,另一个带白色,然后覆盖它们,但这看起来并不优雅(例如,如果我想改变背景,它将无法正常工作).

任何想法我怎么可能这样做？

编辑:

这是HTML:

<div class="blue white1 white">text</div>

.blue {

border: blue 4px solid;
etc..
}

我有一个我在网站上使用的播放器.
我想改变播放按钮的外观.

我想用虚线边框做这个,然后增加破折号之间的空间.那没用.

我无法使用图像.有CSS(3)解决方案吗？

我希望它看起来像这样.

这真的是关于角落!

-------------更新----------------

所以我使用了@Naila的解决方案来使它工作.针对以下问题运行:

我使用Video.js插件WordPress,我正在创建一个新的皮肤

当我跟着时,css我发现已经有一个::before处理游戏箭头的-pseudo.

::before箭头的-pseudo表示宽度为100%,这有助于箭头位于中心.因为我使用30%的宽度使边框成为一个角落.这会覆盖100%的早期宽度.导致以下结果:

这是:
CodePen

如果您刚刚在CSS字段中浏览此CSS,您将获得我现在所处的位置并查看问题:

/*
Player Skin Designer for Video.js
http://videojs.com

To customize the player skin edit 
the CSS below. Click "details" 
below to add comments or questions.
This file uses some SCSS. Learn more  
at http://sass-lang.com/guide)

This designer can be linked to at:
http://codepen.io/heff/pen/EarCt/left/?editors=010
*/

// The following are SCSS variables to automate some of the values.
// …

有没有办法在CSS中为边角着色？

即: border-top-left-corner-color: red

如果它不能在纯CSS中完成,可以用一些JS/jQuery技巧来完成吗？

我有一个具有这种效果的设计

我不关心字体样式或任何细节,我现在关注的是创建框架,如果可能的话,按钮也是如此.有谁知道如何在CSS中做这种效果？

这是我非常基本的html/css代码,甚至没有任何帮助.如果它更适合你,你可以完全修改它.顺便说一句,我正在使用bootstrap 3.

/******** The html *********/
    <div class="col-md-12 bg-img">
        <div>Italy has never been so close</div>
    </div>

/******** The css *********/
    .bg-img {
      display: table;
      width: 100%;
      height: 100px;
      text-align: center;
      background: #999 url("http://p1.pichost.me/i/15/1380265.jpg") no-repeat fixed center;
    }

    .bg-img div {
      display: table-cell;
      vertical-align: middle;
    width:10px;
      font-weight:700;
    }

我使用的是通用图像,因为它不应该有任何区别.这是小提琴. https://jsfiddle.net/3aL4xnr8/

我想仅将边框应用于容器的特定角，类似于下图。下面的摘要容器的角落有一个小边框。我怎样才能实现这个目标？先感谢您。