仅限角落的CSS边框

Question

角落边框效果

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

Answer 1

这是一个仅限CSS的选项，如果有人好奇，使用生成的内容（尽管您可以使用额外的元素，以获得更好的浏览器支持 - :before和:after是IE8 + - http://caniuse.com/#feat=css-gencontent ）。

<强> HTML：

<div><span></span></div>

<强> CSS：

div {
    position: relative;
    width: 100px;
    height: 100px;
    margin: 20px;
    border: 1px solid #000;
}
div:before {
    display: block;
    content: "";
    width: 20px;
    height: 20px;
    position: absolute;
    top: -10px;
    left: -10px;
    border-top: 1px solid #000;
    border-left: 1px solid #000;
}
div:after {
    display: block;
    content: "";
    width: 20px;
    height: 20px;
    position: absolute;
    top: -10px;
    right: -10px;
    border-top: 1px solid #000;
    border-right: 1px solid #000;
}
span:before {
    display: block;
    content: "";
    width: 20px;
    height: 20px;
    position: absolute;
    bottom: -10px;
    left: -10px;
    border-bottom: 1px solid #000;
    border-left: 1px solid #000;
}
span:after {
    display: block;
    content: "";
    width: 20px;
    height: 20px;
    position: absolute;
    bottom: -10px;
    right: -10px;
    border-bottom: 1px solid #000;
    border-right: 1px solid #000;
}

http://jsfiddle.net/ryanbrill/ARVvq/

Answer 2

以下是我提出的border-image解决方案，适用于任何规模的内容。

这是Demo。

这是用于代码的图像：

border: 15px solid #000000;
border-image: url('https://i.stack.imgur.com/1WlsT.png') 34% repeat;

如果您希望元素是您明确设置的大小，请添加：

box-sizing: border-box;

Answer 3

这是一种创造性方法......不要认为这种功能有本机支持。

http://jsfiddle.net/tlaverdure/NrU34/

.box1{
position:relative;
background:#FFF;
width:200px;
height:200px;
border:solid 2px #090;
-webkit-border-radius: 3px;
border-radius: 3px;
margin:0 auto;
}
.box2{
position:absolute;
width:210px;
height:180px;
background-color:#FFF;
top:10px;
left:-5px;
}
.box3{
position:absolute;
width:180px;
height:210px;
background-color:#FFF;
top:-5px;
left:10px;
}
.box4{
border:solid 1px #009;
width:175px;
height:175px;
margin: 10px auto;
position:relative;
}

Answer 4

我认为您也可以通过使用任何图片编辑器（如photoshop）创建一个带有透明填充的圆角矩形，然后将此图像作为背景，以便您尝试制作边框，然后将此图像放在div中具有绝对位置且具有适合的z-index，可以在您想要提供此效果的部分上而不影响显示

因为简单border-radius与所有旧浏览器不兼容，并且在新浏览器中必须以多种形式使用，以便可以与safari，opera，即chrome，mozilla兼容，所以我认为使用这样的网站中可能从旧浏览器访问的属性效率不高！这只是我的观点：）

Answer 5

纯CSS方式将使用这样的伪元素： - 偏移量（class ExampleActivity extends Activity { @Bind(R.id.user) EditText username; @Bind(R.id.pass) EditText password; @BindString(R.string.login_error) String loginErrorMessage; @OnClick(R.id.submit) void submit() { // TODO call server... } @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.simple_activity); ButterKnife.bind(this); // TODO Use fields... } } 和top）等于left的负数

＆＃13;

＆＃13;

border-width

＆＃13;

body {
 
}

ul {
  list-style: none;
  text-align: center;
}

li {
  position: relative;
  display: inline-block;
  padding: 10px 40px;
  background-color: yellow;
  border: 1px solid #000;
  z-index: 0;
}

li:before {
  position: absolute;
  content: '';
  top: -1px;
  left: calc(50%);
  transform: translate(-50%,0);
  height: calc(100% + 2px);
  width: calc(100% - 15px);
  background-color: yellow;
  z-index: -1;
}

li:after {
  position: absolute;
  content: '';
  top: 50%;
  left: -1px;
  transform: translate(0%,-50%);
  height: calc(100% - 15px);
  width: calc(100% + 2px);
  background-color: yellow;
  z-index: -1;
}

a {
  position: relative;
  z-index: 1;
}

＆＃13;

＆＃13;

＆＃13;

Answer 6

以下是一个工作示例：http://jsfiddle.net/3jo5btxd/

CSS:

#div1 {
    position: relative;
    height: 100px;
    width: 100px;
    background-color: white;
    border: 1px solid transparent;
}

#div2 {
    position: absolute;
    top: -2px;
    left: -2px;
    height: 84px;
    width: 84px;
    background-color: #FFF;
    border-radius: 15px;
    padding: 10px;
}

#div1:hover {
    border: 1px solid red;
}

HTML:

<div id="div1"><div id="div2"><img src="http://placekitten.com/g/82/82"></div></div>

修改为在悬停时添加边框。