CSS 圆形边框

Question

CSS 圆形边框

3

<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <title>1</title>
        <style type="text/css">
body{margin:100px;}
#x
{
    position:relative;
    width:300px;
    height:360px;
    background-color:#07284a;
    -moz-border-radius: 30px;
    -webkit-border-radius:30px;
    -khtml-border-radius:30px;
    border-radius:30px;
    border:1px solid #37629B;
}
#f
{
    background-color:#07284a;
    width:126px;
    height:126px;
    position:absolute;
    right:-63px;
    top:-63px;
    -moz-border-radius: 63px;
    -webkit-border-radius:63px;
    -khtml-border-radius:63px;
    border-radius:63px;
    border:1px solid red;
}
        </style>
    </head>
<body>
<div id="x">
    <div id="f"></div>
</div>

在“x”块内显示了圆形的红色边框... 我如何从圆形中删除25％的边框？对于糟糕的英语表示抱歉。添加 http://www.flickr.com/photos/26325973@N02/5223999393/

- Isis

你能否尝试更详细地解释一下“如何从圆形中删除25％的边框”是什么意思？也许谷歌翻译可以帮助 :) - Yahel

1

这是一个 jsfiddle 上的代码：http://jsfiddle.net/5MZMj/ - Yahel

1

我看到你在这里使用了你其他CSS相关问题中给出的已更正的代码：https://dev59.com/3FLTa4cB1Zd3GeqPY0f8#4314024。你仍然需要接受一个答案。 - Evan Mulawski

在 Flickr 上为这张图片点赞吧 :) “一张图片胜过千言万语” - Rob Kielty

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- casablanca · Accepted Answer

我认为你想要移除边框的左下四分之一，使其与大矩形融合。您可以通过移除底部边框并旋转45度来实现这一目标，使底部部分变为左下方：

border-bottom-color: transparent;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
transform: rotate(45deg);