html+css3 与 flutter 容器底边加圆角的效果对比

css3要做这个效果有容易，效果如下：

        .test {
            width: 100px;
            height: 100px;
            padding: 10px;
            border-top-left-radius: 10px;
            border-top-right-radius: 10px;
            background: rgba(0,0,0,0.1);
            border-bottom: 10px solid rgba(0, 0, 0, 1.0);
            box-sizing: border-box;
        }
    <div class="test">aa</div>

//////////////////////////////////////////////////////////////////////

flutter会有问题，代码如下

		Container(
            width: 100,
            height: 100,
            padding: EdgeInsets.all(10),
            decoration: BoxDecoration(
              color: Color(0xff000000).withAlpha(10),
              border: Border(bottom: BorderSide(width: 10,color: Color.fromRGBO(0, 0, 0, 1.0))),
              borderRadius: BorderRadius.only(topLeft: Radius.circular(10),topRight: Radius.circular(10))
            ),
            child: Text('aa'),
          )

会提示错误：A borderRadius can only be given for a uniform Border.（只能为统一边界指定边界半径。）这个是flutter模型规则规定的， 即可以全边框加全圆角，或者是border单边与borderRadius单角两选一。 如果要做到html+css3的效果可以在Container外加上ClipRRect

		ClipRRect(
          borderRadius: BorderRadius.only(topLeft: Radius.circular(10), topRight: Radius.circular(10)),
          child:Container(
            width: 100,
            height: 100,
            padding: EdgeInsets.all(10),
            decoration: BoxDecoration(
              color: Color(0xff000000).withAlpha(10),
              border: Border(bottom: BorderSide(width: 10,color: Color.fromRGBO(0, 0, 0, 1.0))),
              // borderRadius: BorderRadius.only(topLeft: Radius.circular(10),topRight: Radius.circular(10))
            ),
            child: Text('aa'),
          )
        )